Remove default margin around box model body

Question

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.

score 0 · Answer 1 · answered Apr 09 '23 at 07:19

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:

<!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 {
            margin-top: 0;
            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>

score 0 · Answer 2 · answered Apr 09 '23 at 07:59

You just need to target all the elements and set their margin to zero, the unwanted margins relates to p, h1, and ul tags:

<!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>
    *,
    body {
      margin: 0;
      padding: 0;
    }
    
    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>

Search for the CSS Reset and there are plenty of good resources for how to write an efficient CSS 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.

Remove default margin around box model body

2 Answers2