Why does setting padding:0 on
gives different result than setting it on
?

Question

Here is my code

#example {
  border:1px solid black;
  padding:0;
}

<div>
  <p id="example">paragraph line 1<br>
 paragraph line 2<br>
 paragraph line 3<br>
 paragraph line 4</p>
</div>

This will result to the paragraph having 0 padding top and bottom. However, if I put the id="example" on the div like this,

#example {
  border:1px solid black;
  padding:0;
}

<div id="example">
  <p>paragraph line 1<br>
 paragraph line 2<br>
 paragraph line 3<br>
 paragraph line 4</p>
</div>

it will result with the paragraph having padding on the top and bottom. Why does it yield different result despite declaring both id="example" a padding of padding:0;?

are you sure you talking about the `padding` and not about the `margin`? Both your examples [here in a fiddle](https://jsfiddle.net/e1vfkjbo/) I don't see any different behavior with padding — caramba, Nov 27 '20 at 07:18

score 1 · Answer 1 · answered Nov 27 '20 at 07:14

You can always use reset css before building your website here's a great reference here Reset Css so that each tags are set to default.

also add in your reset css

*,*:before,*:after {box-sizing:border-box;}

to not allow paddings or margins give extra spaces when you add them in a tag element. This way you can have more freedom of your own styling for adding margins or paddings in your style.

score 1 · Answer 2 · answered Nov 27 '20 at 07:20

There is a default margin in html elements unless you remove it yourself. When a new container is added, in your case p tag, there is default margin. So to remove your problem you can use code as:

*{ margin: 0; padding: 0; }

this gets styled in every element in html and removes default padding and margin. Hope this solves your doubts.

score 1 · Answer 3 · answered Nov 27 '20 at 07:21

You are trying to change margin with padding css.

tag has margin inside in the div.Set margin zero to remove it.

p {
  display: block;
  margin:0;
}

#example {
   border:1px solid black;
   padding:0;
 }

<body>
 <div id="example">
  <p>paragraph line 1<br>
     paragraph l2ine 2<br>
     paragraph line 3<br>
     paragraph line 4</p>
 </div>
</body>

score 1 · Answer 4 · answered Nov 27 '20 at 07:39

It's simple because HTML Paragraph tag has default margin this is define in the Default style sheet for HTML 4 and that value are different for different Browser.

That is the reason of using Universall CSS Reset

* {
    margin: 0;
    padding: 0;
}

which reset *padding and margin for every HTML tags

Otherwhise the div Tag Element doesn't have any default padding or magin for all Browser.

So when you apply the selector #example to p and div tag It's completly normal to have different behaviour as long has the p tags has a default margin and padding depending with browser used.

To avoir that missbehaviour you can rely on the Univeral CSS Reset

score 0 · Answer 5 · answered Nov 27 '20 at 07:16

0

Because each element has different default values. Take a look:

p {
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
}

div {
  display: block;
}

answered Nov 27 '20 at 07:16

Daweed

1,419
1
9
24

FZs · Answer 6 · 2020-11-27T07:31:49.887

0

If I understood correctly, your problem is that in this code:

#example {
  border:1px solid black;
  padding:0;
}

<div id="example">
  <p>paragraph line 1<br>
 paragraph line 2<br>
 paragraph line 3<br>
 paragraph line 4</p>
</div>

...you have space left above and below the paragraph.

You'd think that's the <div>'s padding, however, that's actually the <p>'s default margin.

You can see this by setting the <p>'s margin to 0:

#example {
  border:1px solid black;
  padding:0;
}

#example2{
  margin: 0;
}

<div id="example">
  <p id="example2">paragraph line 1<br>
 paragraph line 2<br>
 paragraph line 3<br>
 paragraph line 4</p>
</div>

edited Nov 27 '20 at 07:31

answered Nov 27 '20 at 07:23

FZs

16,581
13
41
50

Okay. So the `
` `padding:0;` doesn't overwrite the default padding of `
`?
– iOldsoul Nov 27 '20 at 07:49
It's a **margin**! They both create spaces, but margins are *outside* the element and padding *inside* the element. That space was taken up by the `
` element, so, **no**.
– FZs Nov 27 '20 at 09:07

Why does setting padding:0 on gives different result than setting it on ?

6 Answers6

Why does setting padding:0 on
gives different result than setting it on
?