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