Question

Can someone explain this behavior to me?

take this code:

<div style="position:relative; width:960px; margin-left:auto; margin-right:auto; ">
    <div style="background-color:pink;">
        <div style="display:table-cell; padding:10px; width:299px; border-right: solid 1px #f0f0e7; background-color:BlueViolet;">
            <div>TEST#1</div>
        </div>
        <div style="display:table-cell; padding:10px; width:299px; border-right: solid 1px #f0f0e7; background-color:Purple;">
            <div>TEST#2</div>
        </div>
        <div style="display:table-cell; padding:10px; width:299px; border:none; background-color:Purple;">
            <div><div style="padding-top:100px; background-color:Yellow;">TEST#3</div></div>
        </div>
    </div>
</div>

Note that the last <div /> has the padding-top

Although only this one has it, all preceding <div /> are having the padding.

why is this? Is there a way to prevent padding to being applied to the other divs while being applied to only the concerned div?

Thank you,
René

Answer 1

Because that’s how tables work! Every cell in row will always be the same height, just like every cell in a column would be the same width.

If you expect this behaviour but would just like the text to be as high as it can be, add the style

vertical-align: top;

to the divs, as this shows.

Remember, too, that if you’re going to be displaying tabular data, you should just use a regular table.