43

I have been using a reset CSS set of styles for quite some time now and each time I got to create a new website, the reset the annoys me the most is the reseting of a p tag margin and padding. I understand why, but I'm wondering what the "default" padding and/or margin should be on a p element?

I'm guessing this isn't consistent across browsers and often needs to be tweaked for each site, but is there a set of most common margin and/or padding values?

Short version: Is it (for example) 5px margin and padding on top and bottom...or something else?

Darryl Hein
  • 142,451
  • 95
  • 218
  • 261
  • I know what you mean; it is surprisingly difficult to figure out how to “unset” a CSS value. For example a Wordpress theme I use sets blockquotes to have 0 margins which I do not like (it makes them indistinguishable from regular paragraphs). Of course I can edit its `style.css`, but that’s not ideal, and I am instead trying to create a child-theme. Unfortunately, I cannot figure out how to set the blockquote to use its regular, default, unmodified margins. `ఠ_ఠ` – Synetech Feb 12 '13 at 01:32

5 Answers5

36

The CSS 2.1 specification has an default style sheet for HTML 4. It’s just informative and not normative so browsers may use it but do not have to.

Another resource could be the webdeveloper tools of the browsers. Most can show you the cascade of rules that were applied to a particular element. An example: Firefox and Safari (WebKit) seem to use margin: 1em 0px for p elements.

Gumbo
  • 643,351
  • 109
  • 780
  • 844
  • 29
    At the risk of sounding anally retentive, the "px" after zero is superfluous. – autonomatt Apr 10 '12 at 15:10
  • 1
    @autonomatt It's unambiguous, which is reason enough to include it. – rw-nandemo May 17 '16 at 13:03
  • 8
    Not only is unit-less `0` in no way ambiguous, but it is almost universally preferred in CSS style guides (1) https://google.github.io/styleguide/htmlcssguide.xml#0_and_Units (2) https://github.com/necolas/idiomatic-css#4-format (3) http://codeguide.co/#css (4) http://primercss.io/guidelines/#spacing – Spain Train Oct 08 '16 at 01:02
  • 2
    Leaving off units is asking for trouble. Try doing that in science. *The temperature was zero*. :| I get that with margin sizes it doesn't matter, but that's just a bad habit to cultivate IMO. – eric Jan 18 '18 at 03:42
  • 5
    @eric except that 0 in css will never be at a different position relative to other units of measurement... 0px == 0em == 0pt == 0rem == 0 – Brendan Sep 26 '19 at 16:58
8

To even things out across browsers , I use

p{
  margin:0;
}
p + p{
  margin-top:10px;
}

this way I dont "brake" containers original top/bottom spacing and still space the paragraphs nicely if there are more than one.

I just dont like to see p pushing parent containers like this 

.container {
  border: 1px solid #ccc;
  padding: 15px;
}
<div class="container">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin.</p>
</div>

and see this as ideal solution 

.container {
  border: 1px solid #ccc;
  padding: 15px;
}
p{
  margin:0;
}
p + p{
  margin-top:10px;
}
<div class="container">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin.</p>
</div>
Benn
  • 4,840
  • 8
  • 65
  • 106
5

P tag margin top and bottom is 16px.

That is similar to giving style margin: 16px 0px; to a paragraph.

Suyesh Tiwari
  • 93
  • 1
  • 6
  • 3
    Actually, it's not always `16px`, it's actually relative to the `font-size` of the parent element, and `body`'s default `font-size` depends on user preferences. So it's much more likely to be `1em` like Gumbo's answer says. – Flimm May 09 '16 at 20:51
0

I always use firefox.

By the firebug addon I found that the default margin-top/bottom of the

tag is set to 16px and the padding is set to 0, while for the body element the margin-top/bottom/right/left is set to 8px.

Ligz
  • 11
  • 1
  • Actually, it's not always 16px, it's actually relative to the font-size of the parent element, and body's default font-size depends on user preferences. So it's much more likely to be 1em like Gumbo's answer says. – Flimm May 09 '16 at 20:52
0

CSS RESET Will reset p tags margin and padding to 0px, common margin and padding depends on your Layout and type of Content.

still you can use 5px , as your own default margin and padding

Wasim Shaikh
  • 6,880
  • 18
  • 61
  • 88