What is the default padding and/or margin for a p element (reset css)?

Question

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

Answer 1

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

Answer 2

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.

Answer 3

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>

Answer 4

P tag margin top and bottom is 16px.

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

Answer 5

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.