Home/ Questions/Q 5977967
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T21:26:49+00:00

I am having a little trouble understanding the following: test.html <!DOCTYPE html> <html dir=ltr

  • 0

I am having a little trouble understanding the following:

test.html

<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="UTF-8" />
<title>CSS Test</title>
<link rel="stylesheet" type="text/css" media="all" href="test.css" />
</head>
<body>
    <div id="id_main">
        <div id="id_item1" class="item">
            <p>Item 1</p>
        </div>
        <div id="id_item2" class="item">
            <p>
                Item 2 - This item has more text than the first item
                and it shows because the text wraps around and changes
                the vertical size of the item.
            </p>
        </div>
        <div id="id_item3" class="item">
            <p>Item 3</p>
        </div>
        <div id="id_item4" class="item">
            <p>Item 4</p>
        </div>
        <div id="id_item5" class="item">
            <p>Item 5</p>
        </div>
        </div>
</body>
</html>

test.css

#id_main {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    background-color: teal;
    vertical-align: top;
}

div.item {
    border: 1px solid black;
    display: inline-block;
    width: 255px;
    text-align: center;
    background-color: grey;
    height: 129px;
}

Since the items all have uniform widths and heights, I was expecting that the items would display in a grid almost like a table. In the first row, though, item1 is aligned with the bottom of the row and item2 is aligned with the top! And the row is larger than the height of either item. Why does this happen?

Thanks,

Carl

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You need to add vertical-align: top to div.item:

    http://jsfiddle.net/DZzc5/2/

    div.item {
    border: 1px solid black;
    display: inline-block;
    vertical-align: top;
    width: 255px;
    text-align: center;
    background-color: grey;
    height: 129px;
}

    To understand why this is required, I recommend you read this:

    http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/

    Specifically, the part talking about “the baseline”.

    • 0