Why the top & bottom padding comes to floated element?

Question

One doubt:

I give float:left for the div and put another block element such as h3 inside the div. Then it gives padding top and bottom. If i remove float: left it wont give padding.

html

<div class="one"><h3>Test with Float</h3></div>
<div class="clear">&nbsp;</div>
<div class="two"><h3>Test without Float</h3></div>

css

.one{
    background: grey;
    float:left;
    width: 100%;
}
.two{
    background: #DAD5C1;
      width: 100%;
}
.clear{
    clear: both;
}

http://jsfiddle.net/7yh3kuea/

Please put your code in the question or don't bother linking to the fiddle at all. Don't circumvent the quality filter. — BoltClock, Aug 31 '14 at 09:45

score 0 · Answer 1 · edited May 23 '17 at 10:25

0

It isn't padding but it is margin which is ignored in no-floated element.

More informations is here.

edited May 23 '17 at 10:25

Community

1
1

answered Aug 31 '14 at 09:53

marek094

424
2
11

sorry, i have seen this link already. but not understand well. – Rahul Aug 31 '14 at 10:03

Why the top & bottom padding comes to floated element?

1 Answers1