Remove space above and below p tag HTML
<p>
elements generally have margins and / or padding. You can set those to zero in a stylesheet.
li p {
margin: 0;
padding: 0;
}
Semantically speaking, however, it is fairly unusual to have a list of paragraphs.
What is the default margin value of p tag?
Different Browsers are build upon different render engines.
Chrome and Safari are using the WebKit-render engine whereas Firefox uses Gecko.
The different engines are different not just because the software is different but also because they have different settings. Thats why most webpages look slightly different in differnt browsers.
The Answer:
In Chrome (webkit) the margin-top (above the element) and margin-bottom (below the element) of the <p>
tag is 1em.
In Firefox (Gecko) all margins are 0 except the margin-bottom wich is 1em again.
The way to get rid of this problem is to make a CSS-reset.
The easyest to use would be the one by Meyerweb.
Why do the margins of the p tag disappear when placed in a td?
Just add a doctype declaration to your page:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<table>
<tr>
<td style="font-size: 16px;"><p>Hello</p></td>
</tr>
</table>
</body>
</html>
Without it, your page is displayed in quirks mode, where margins may behave unexpectedly, especially when it comes to tables. I'm not sure what exactly is happening here that causes your p
to lose its margins when in your td
, but I do know that it only occurs in quirks mode.
Paragraph tag adds empty space between sections
You are seeing the effects of collapsing margins.
The top/bottom margins on the p
tags collapse with the margins of .content
(0 in this case) and then collapse with the margins of the <header>
and <footer>
(also 0).
Note that the p
elements has a top and bottom margin by default (browser style sheet).
To get the effect that you expecting, you could trigger a block formatting context on .content
by adding overflow: auto
to the CSS rules for .content
.
By so doing, the top/bottom margins of the p
elements would be constrained within the edges of the .content
block.
If .content
had either a border or padding along the top/bottom edges, the paragraph margins would not collapse, because margins must be adjacent to each other in order to collapse.
See demo at: http://jsfiddle.net/audetwebdesign/wXv9t/
Additional Explanation
Background colors extend through the content, padding and border, but not the margin. In this case, when the p
margin collapses with the .content
block, the top/bottom edges of the top/bottom p
coincide with the top/bottom edge of .content
, hence the background color of .content
coincides with the top/bottom edges of the paragraphs. With overflow: auto
, the p
margins are contained within the content box of .content
, so the background color is seen through the margins of the p
, so in this sense, the space is "reclaimed".
References
Collapsing Margins: http://www.w3.org/TR/CSS2/box.html#collapsing-margins
Block Formatting Context: http://www.w3.org/TR/CSS21/visuren.html#block-formatting
Why is paragraph tag overflowing instead of creating a new line?
Add word-wrap:break-word
to your paragraph style
How to reduce the space between p tags?
use css :
p { margin:0 }
Try this wonderful plugin http://www.getfirebug.com :)
EDIT: Firebug is now closed as a project, it was migrated to https://www.mozilla.org/en-US/firefox/developer
Related Topics
How to Center Div Vertically Inside of Absolutely Positioned Parent Div
Center Image in Div Horizontally
How to Vertically Align Something Inside a Span Tag
Html5 Video Tag Codecs Attribute
How to Add a Margin Between Bootstrap Columns Without Wrapping
How to Cut a Circular Part from an Image
How to Implement Curve Background in CSS
Floating Elements Are Outside of Containing Blocks
Flexbox Resize and Scrollable Overflow
Chrome: Automatic Shift of Web Elements
Use Fieldset Legend with Bootstrap