How display: block working in this css exactly

Hi, I do know how display block work or at least have a idea of. But this isn’t about just that.

            <button type="button">
                <span></span>
            </button>

I hope this much html should be enough since it’s only need that much.

button span{
    display: block;
    background: #999;
    height: 26px;
    width: 26px;
    border-radius: 50%;
}

As you see in the css, there is one property which is display: block and that’s what confusing me here.

For example If I remove display: block from this css the button icon cirlce (form from the width and height and background border property in that css) will disappear.
For example
le this is what the current css would do
image

I tried adding more images to make a more clear picture of my problem but it seems new users aren’t allowed to embed more than 1 item.

so I’m left with your imagination and my explanation capabilities.

My question is why the circle inside that button disappears when we remove display: block.

another question is why the circle gets in the middle position if used display: inline-block.

Thanks for reading it.

The reason the circle gets in the middle position when using display: inline-block is that when an element is set to inline-block, it becomes a block-level element within the inline flow. This means that the circle is treated as a block-level element, and the browser’s default styling for block-level elements with text-align: center will place the circle in the middle of the button.

1 Like

can you explain more, I get the middle part but there is one more question

My question is why the circle inside that button disappears when we remove display: block.

but ironically, bing AI gave me the same answer which you mentioned

The “display: block” property in CSS takes up the full width available and forces a line break before and after the element. This can cause the element to be pushed out of its container or hidden.
Bing Sucks At Searches

1 Like

thanks for the time.

There are few things I would like to confirm.

Since the button is inside a span I would assume button have a default display: inline and since inline doesn’t have width and height. the circle just disappears because it needs width and height?

The display: inline-block Value

Compared to display: inline, the major difference is that display: inline-block allows to set a width and height on the element.

Also, with display: inline-block, the top and bottom margins/paddings are respected, but with display: inline they are not.

Compared to display: block, the major difference is that display: inline-block does not add a line-break after the element, so the element can sit next to other elements.