The “Display” CSS property controls whether an element is a block or an inline element. It also determines the layout type applied to its child items, such as grid or flex. When used incorrectly, the display type can cause confusion for developers. In this section, we’ll go through some ways the display property can go wrong. Inline Elements Elements such as “span” and “a” are inline by default. Suppose we want to add vertical padding to a span :
it is won’t work. Vertical padding doesn’t work for inline elements. You would have to change the element’s display property to inline-block or block . The same goes for margin :
This margin won’t have an effect. You would have to change the display type to inline-block or block
Spacing and Inline Elements
Each inline element is treated as a word. Take the following:
Code Here :
<span> Hello World <span>
<span> World <span>
Output :
Hello World
This will render Hello World . Notice the spacing between the two words. Where did this come from? Well, because an inline element is treated as a word, the browser automatically adds a space between words — just like there is a space between each word when you type a sentence. This gets more interesting when we have a group of links
In the CSS, we would add the spacing like this:
You would expect that the space between them would equal 8 pixels, right? This is not the case. ]e spacing would be 8 pixels plus an additional 1 pixel from the character spacing mentioned previously. Here is how to solve this issue
Thanks to Ahmad Shadeed
