Display: table-cell, contents and padding

Question

I have a very straightforward HTML page that displays content in two columns. To format the columns I'm using <div> as the outer container (display: table-row) and two inner <div> as the actual columns (display: table-cell). One of these columns has a padding at the top. The markup looks like the following - extra markup and styles omitted for clarity:

<style>
.row { display: table-row }
.cell { display: table-cell; border: 1px solid black; width: 150px }
.content { background-color: yellow }
</style>

<div class="row">
   <div class="cell">
      <div class="content">Some content; this is not padded.</div>
   </div>

    <div class="cell">
        <div class="content">More content; padded at the top.</div>
    </div>
</div>

---

I'm getting this:

---

But I expected this:

---

The behavior is the same whether the padding-top is applied to the cell or the content. Am I missing anything? Thanks.

Answer 1

You can achieve your two desired results just by using padding and margin on your div with the class content. Remember, padding will contribute to the overall width and height of an object, so that will extend the background color.

First screen shot:

<div class="content" style="margin-top: 10px">More content; padded at the top.</div>

Second screen shot:

<div class="content" style="padding-top: 10px">More content; padded at the top.</div>