Padding on Div

Hi so I have extra padding on my div on the right and im trying to line it up together with the first image.

Heres the link.

It’s not clear what you are trying to align with what. A little more detail needed.

Are you talking about this:

#innercontentinfo{
  display:table-cell;
  vertical-align:top;
}

The default for table-cell is vertical-align:middle so content will align vertically in the middle. In most cases when using display:table-cell you want to use vertical-align:top for normal content.

1 Like

<partly off topic>

The default for HTML <td> is indeed {vertical-align:middle}.

But it seems to me that the default for CSS {display:table-cell} is {vertical-align:baseline}

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>table-tester2</title>
<!--

-->
    <style type="text/css">
.table {display:table;}
table,
.table {
    height:200px;
    margin:0 auto;
    outline:1px solid magenta;
}
.tcell {display:table-cell;}
td,
.tcell {
    outline:1px solid lime;
}

    </style>
</head>
<body>

<div class="table">
    <div class="tcell"><p>The quick brown fox jumped</p></div>
    <div class="tcell">over the lazy dog's back.</div>
</div>
<br><br>
<table>
  <tr>
    <td><p>The quick brown fox jumped</p></td>
    <td>over the lazy dog's back.</td>
  </tr>
</table>

</body>
</html>

According to Chrome and FF, anyway.

</off topic>

1 Like

Yes good catch Ron :smile:

The default alignment for divs and most textual elements is of course baseline. The fact that we change the display of the element to table-cell does not affect the default vertical alignment of that element (or indeed any of its other default properties apart from the one we are changing).

The result is the same in that most times you will also need to set the vertical-alignment when you use display:table-cell and that would usually be top :smile:

2 Likes

Thanks Guys…@PaulOB @ronpat

Thanks for elaborating about the properties, @PaulOB. I happened to notice that table-cell behavior long ago but never could explain it. Your explanation reveals why HTML <table> and <td> border-spacing and cell padding values are not applied to display:table and display:table-cell, respectively, also.

I will think about other “display” situations with a new eye.

Cheers!

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.