Incorrect behavior of inline elements with inline-block elements

Question

Now, the difference between inline and inline-block elements is that inline element does not allow for margin-top or margin-bottom as compared to inline-block elements. However, in the below example, whenever I apply a margin to the inline-block element, a margin appears for the inline ones too. Can anyone tell me why? I have spent over an hour trying to figure out but failed.

<html>
<head>
    <style>
        div {
            background:yellow;
            margin:10px;
            height:70px;
        }

        a {
            display:inline;
            background-color:#FFF;
            width:20px;
            height:20px;
            border:solid black 1px;
        }

        span {
          margin-top:10px;
          display:inline-block;
          background:red;
        }
        a, span{
         vertical-align:center;
        }

    </style>
</head>
<body>
<div>
<a>abcd</a>
<a>efgh</a>
<span>Some text</span>
</div>
</body>
</html>

What i got is this.

Here both the abcd and efgh elements have the same 10px margin as the span.

Alohci · Accepted Answer · 2023-01-22 13:19:20Z

1

Now, the difference between inline and inline-block elements is that inline element does not allow for margin-top or margin-bottom as compared to inline-block elements.

One difference is that margin-top and margin-bottom have no effect on inline elements. It's not the only difference. Inline elements still have the margin values specified on them.

Here both the abcd and efgh elements have the same 10px margin as the span.

No they don't. The abcd and efgh elements have 0 margins on them. But they are vertically aligned with the span element through their respective baselines. That's why the abcd and efgh elements are moved vertically downwards by the margin on the span.

answered Jan 22, 2023 at 13:19

Alohci

84.2k16 gold badges121 silver badges164 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Satyam Rajbhar Over a year ago

as Alohci said they are not same if you remove the height from div and add display: flex; align-item: center; you will see span is not aligning with ancher tags.

Collectives™ on Stack Overflow

Incorrect behavior of inline elements with inline-block elements

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related