CODEWITHSUNDEEP
htmlcsscss-floatpadding
PcAF
PcAF

Reputation: 2007

Do floated elements ignore padding?

This answer states that:

When you float an element, it's effectively taking it out of the document flow, so adding padding to its parent won't have an effect on it. [...]

Also MDN states that:

[...] when an element is floated it is taken out of the normal flow of the document. It is shifted to the left or right until it touches the edge of its containing box or another floated element.

Well, somehow, I added padding to parent element and the floated one was shifted:

#a{
    width: 100px;
    height: 100px;
    background-color: red;
    float: left;
}

#parent
{
    padding: 100px;
}
<!DOCTYPE html>
<body>
    <div id=parent>
        <div id=a></div>
    </div>
</body>


    
</html>

Upvotes: 3

Views: 2027

Answers (1)

Oriol
Oriol

Reputation: 288680

No. Floats do not ignore the padding of their container.

The containing block of a float is established by the content edge of the container:

10.1 Definition of "containing block"

the containing block is formed by the content edge of the nearest block container ancestor box.

That content edge is affected by the padding of the container:

8.1 Box dimensions

enter image description here

And floats can't go to the top or to the left than their containing block.

Float rules

The left outer edge of a left-floating box may not be to the left of the left edge of its containing block. An analogous rule holds for right-floating elements.

A floating box's outer top may not be higher than the top of its containing block.

Upvotes: 3

Related Questions