Menu
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?
580
We get down to that fully in CSS Layout. Default margins, borders and padding are all 0, so when you wrap a div around some text, there is no space between its edges and the text. div elements obey the box model strictly, while adding padding etc. to table cells can be interpreted a bit more loosely by browsers.
The padding property in CSS defines the innermost portion of the box model, creating space around an element's content, inside of any defined margins and/or borders. Padding values are set using lengths or percentages, and cannot accept negative values. The initial, or default, value for all padding properties is 0 .
The Answer: In Chrome (webkit) the margin-top (above the element) and margin-bottom (below the element) of the <p> tag is 1em.
There is no space between the inner (content) box and the outer (border) box so there is zero padding. Margin is just the space outside the border. This is important for how you want your element to appear when other elements are nearby.
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.
87
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
