CSS Common Debug For Display property

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

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store