I am a newbie to html/css. I wanted to remove default browser margin in body part.
I have added margin zero to the body. It’s working fine for left and right sections, but not working for top margin areas.
Please find the attached screenshot. I know this is a basic one..but I am new to this..Margin added for body
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Box model</title>
<style>
html,
body {
margin: 0 !important;
padding: 0 !important;
}
p,
h1,
ul {
border: 1px solid rebeccapurple;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos aliquid blanditiis qui nisi quae recusandae possimus ipsam esse voluptatibus necessitatibus, dolorem provident omnis aperiam non quis! Blanditiis, eligendi. Vitae, sunt?
</p>
<h1>this is test</h1>
<ul>
<li>hi</li>
<li>test val</li>
</ul>
</body>
</html>
I tried on adding margin to the body section and it worked fine for right and left of the box.
But on top its not working fine.I tried no. of solutions but didn’t work as expected.
2
Answers
The paragraph tag was taking the margin at the top we can fix that by removing the top margin from the paragraph tag
If this works for you mark this as answered
Code:
You just need to target all the elements and set their
margin
to zero, the unwanted margins relates top, h1, and ul
tags:Search for the
CSS Reset
and there are plenty of good resources for how to write an efficientCSS Reset
. A CSS Reset is a set of CSS rules designed to reset the default styles of HTML elements to a consistent baseline, so that web developers can start from a clean slate and create their own custom styles. The main idea behind a CSS reset is to eliminate or reduce the browser’s default styling of HTML elements, which can vary between different browsers, and create a more consistent cross-browser experience.