CODEWITHSUNDEEP
htmlcsscss-float
SBel
SBel

Reputation: 3359

float element has top margin

I've floated an element right and for some reason it has a margin on top. I don't know where it's coming from.

HTML:

<p>...</p>
<p class="foo">...</p>
<p>...</p>
<p>...</p>

CSS:

p.foo { 
  width: 500px;
  float: right;
}

Image:

The image in which the <p> has a top margin

codepen.io: http://codepen.io/vbelenky/pen/oEmHt

Upvotes: 1

Views: 187

Answers (5)

Chandranshu
Chandranshu

Reputation: 3669

Add a style of margin-top: 0px; to your CSS. Browsers add 1em space before and after each paragraph. If you inspect the styles in Chrome and look for user-agent styles, you'll notice the following:

p {
    display: block;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
}

The -webkit-margin-before is what is assigning that space on top of the floated paragraph. Also have a look at the following answer to understand how to develop your website in a cross-browser way:

Upvotes: 1

FelipeAls
FelipeAls

Reputation: 22171

All paragraphs have a default margin: p { margin: 1em 0; } and a floated one is no different.

  1. If you measure the margin between 2 paragraphs in your browser, you'll see that it isn't 2em (1em+1em) but only a total of 1em.
  2. And this floated paragraph is different from the others while having the same default margins.

Why 1.? (Vertical) margins are said to be collapsed (CSS2.1 Collapsing margins). This is very natural while text is displayed (and HTML/CSS is about text mainly), not so natural when dealing with other types of content but browsers can't know this sort of thing...

In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.
(...)
Horizontal margins never collapse.

Why 2.? The difference is that vertical margins do not collapse for floated elements (same link as above, see the second note in green)

Margins between a floated box and any other box do not collapse

The solution is then pretty obvious: when it comes to vertical margins, you must treat floated elements in a different way than those still in the normal flow of the document (at least you must consider if the values have to be modified or not). Here .foo { margin-top: 0 } or .foo { margin: 0 } (depends of the margin you want at the bottom of this floating paragraph)

Upvotes: 5

Ali Abdolahi
Ali Abdolahi

Reputation: 324

i think, when an Text Element, like <p></p> or something like <h1></h1> get out of DOM with Float, or special positioning like position:absolute or position:fixed get double top margin, this Rule is just about text elements, and not for div, or any other elements.

the solution is clear, just add margin-top:0 to element and fix the problem.

Upvotes: 2

Michelle
Michelle

Reputation: 2712

By default, most browsers set <p>s to have margins on top. In fact, ALL of those <p>s in your codepen example have margins. If you're using Chrome, it's coming from the default browser styles:

p {
display: block;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}

To fix that, simply add the following extra CSS:

.foo {
    margin-top: 0px;
 }

Upvotes: 0

tombruijn
tombruijn

Reputation: 1130

A p element gets a default style by the browser. They have default user agent stylesheets which load on every page even if the site never tells it to. Try using normalize.css or some other normalizing stylesheet to 'disable' default browser styles.

Default Chrome/chromium style for the p element:

p {
display: block;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}

Upvotes: 0

Related Questions