CODEWITHSUNDEEP
htmlcsslayout
Josh G
Josh G

Reputation: 14256

HTML inline-block layout

I'm having trouble understanding the difference between inline, inline-block, and block display options in HTML. Especially how inline-block fits in. Block items seem to always appear on their own line. Inline items don't seem to handle width and height settings well. Inline-block seems to a mix between the two, but leads to some quirky layout situations. Here's an example:

<style type="text/css">
#container {
    height: 100px;
    background: tan;
}

#container p {
    height: 100px;
    background: yellow;
    text-align: center;
    padding: 0px;
    margin: 0px;
    width: 29%;
    display: inline-block;
}

#container div:first-child {
    height: 100px;
    display: inline-block;
    width: 35%;
    padding: 0px;
    margin: 0px;
    border-top: 2px solid #888;
    border-right: 2px solid #888;
}

#container div:last-child {
    height: 100px;
    display: inline-block;
    width: 35%;
    padding: 0px;
    margin: 0px;
    border-left: 2px solid #888;
    border-bottom: 2px solid #888;
}
</style>
<body>
    <div id="container">
        <div class="decorator"></div>
        <p>A very long test paragraph like</p>
        <div class="decorator"></div>
    </div>
</body>

My expectation is that the 'p' element and the two 'div' elements would all be inline within the outer div with a height of 100px. I can't figure out why the 'p' element is displayed below the parent div. vertical-align has no affect, nor does switching 'height' to 'line-height'. Can anybody explain what is going on here?

Thanks!

Upvotes: 0

Views: 689

Answers (2)

Henrik
Henrik

Reputation: 4034

Elements without vertical-align specified (such as p) is aligned to the baseline. If you set p to have vertical-align:top it will align with the top of its parent (and thereby the other elements in your example).

Upvotes: 5

George
George

Reputation: 36784

First things first, you have used inline as a display. This means whitespace will be taken into account.

Look here: This is your current layout.

And then here: This is your layout without whitespace, notice the difference?

Because of this whitespace theres a good chance that in some cases your layout will be distorted.

Now for the <p> issue: By default, vertical-align is set to baseline meaning the baseline of the paragraph element will be aligned with the baseline of it's parent element. Give it the style vertical-align:top to fix this issue.

Upvotes: 1

Related Questions