Do floated elements ignore padding?

Question

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>

That answer probably describes some old non-standard behavior... I can't reproduce the problem described in that question. — Oriol, Aug 07 '16 at 22:32

score 3 · Accepted Answer · edited Jun 20 '20 at 09:12

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

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.

Do floated elements ignore padding?

1 Answers1