0

I'm new to web dev, and I'm trying to understand more about the white space on the top of the page.

Here's my code snippet:

HTML:

<div>
    <p>lorem ipsum</P>
</div>

CSS:

div {
    background-color: black;
}

I tried to set 0 margin to the body element but the very top of the browser will still show white space.

body {
    margin: 0;
}

Then I tried to add padding to the div, and the white space will no longer be there.

div {
    padding-top: 100px;
}

But is there other ways to get rid of the white space?

Also, my understanding was that the browser has default setting to set margins, why did the white space remain after I set the body element's margin to 0?

Aaron
  • 101
  • 1
  • 10
  • 1
    Check in developers tools where is the white space and then you will know for sure where to edit. – Flagmans Dec 04 '21 at 06:49

2 Answers2

4

You can specify both margin and padding to be 0 for the HTML element to remove all whitespace around the HTML element.

html {
  margin: 0;
  padding: 0;
}

This same technique can be used to remove all whitespace around any given element. By default, the p tag will include an added margin, causing more whitespace. To completely remove all whitespace for your given scenario, you can edit the above CSS block to the following:

html, body, p {
  margin: 0;
  padding: 0;
}
CoopDaddio
  • 577
  • 1
  • 5
  • 20
1

You can use this also:

*{
    margin :0;
    padding :0;
    box-sizing :border-box;
}
Anas Hassan
  • 51
  • 5