Remove Space Above and Below <P> Tag HTML

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.

How to remove the space between paragraphs (p)

You can use margin: 0; to remove the spaces.

p { margin: 0; }

If this still don't work, try making it !important

p { margin: 0 !important; }

Check this http://jsfiddle.net/zg7fP/1/

Remove spacing between p

That space isn't between the paragraphs. that's the space given to the characters themselves. Type has white space around it (partially to accommodate ascenders and descenders).

If you want to remove the space between the lines of text themselves, then you need to put the text into the same paragraph, and adjust the line height.

But even then, note that you'll never get this exact, as every typeface and font is going to have different metrics, and you won't always know what exact font will be shown on the end-user's screen. Using a web font will make things a bit more predictable for you.

Extra Space After Paragraph Tags

There is no way to remove the padding & margin on p elements without the usage of css.

The easiest way to override the fact that you cant add a class or change it in a css file is to add it directly to the p element. This is not valid HTML5 though and should be avoided as much as possible.

Try this out:

<p style="margin: 0;">Text</p>

You can add other styling elements within the style tag too. Things like background colors, padding, etc.

Just remember to avoid using this way it when possible.

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

Remove spacing between a div and a p tags

Add this in your css file

p{
  margin: 0;
  padding: 0;
}

And add some text in your markup..

Here is the full code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>

#IO-out {
    width: 100%;
    height: 100%;

    /** make void keyboard work **/
    margin: 0px;
    padding: 0px;
}
p{
  margin: 0;
  padding: ;
}
.pn {
    margin: 0px;
    padding: 0px;
}
.t {
    color:  white;
    background-color: black;
    font-family: "Roboto Mono", monospace, "wingdings"; /** ;) **/
}
.t.normal {
    color: white;
    background-color: black;
}
  </style>
</head>

    <body class="t normal">
        <div id="container">
            <div id="IO-out" class="t normal">
                p elements with class "pn" are added here using javascript
            </div>
            <p id="VoidKeyboard">Remove Spacing</p>
        </div>
    </body>
</html>

Remove white space above and below large text in an inline-block element

It appears as though you need to explicitly set a font, and change the line-height and height as needed. Assuming 'Times New Roman' is your browser's default font:

span {
  display: inline-block;
  font-size: 50px;
  background-color: green;
  /*new:*/
  font-family: 'Times New Roman';
  line-height: 34px;
  height: 35px;
}

<span>
    BIG TEXT
</span>

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

Remove Space Above and Below <P> Tag HTML