Home/ Questions/Q 8891001
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T22:37:45+00:00

I’m having trouble understanding the difference between inline, inline-block, and block display options in

  • 0

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!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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).

    • 0