Shulou(Shulou.com)06/01 Report--

This article focuses on how CSS removes the spacing between inline-block elements. Has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand.

I. description of phenomena

In the real sense, there will be spacing between the elements rendered at the inline-block level, such as line breaks or spaces separated by spaces. This is because the browser will read line breaks and so on into a space when parsing.

2. The method of removing spaces

We can remove line breaks and spaces between elements so that the spacing is naturally gone, but this reduces the readability of the code and is not desirable.

Link 1

Link 2

Link 3

Link 4

Link 1 Link 2 Link 3 Link 4

Link 1 Link 2 Link 3 Link 4

Use negative margin values, but this approach is also not desirable due to external uncertainties and the negative margin value of the last element.

A {

Background:pink

Display:inline-block

Padding:.5em1em

Margin:-3px

}

Link 1

Link 2

Link 3

Link 4

③ sets the font-size:0 for the parent, and then sets our font size in the child elements, which also removes the spacing between the elements.

Div {

Font-size:0

}

A {

Font-size:16px

Background:pink

}

Link 1

Link 2

Link 3

Link 4

④ deletes the closed tag.

Link 1

Link 2

Link 3

Link 4

⑤ uses letter-spacing.

Div {

Letter-spacing:-6px

}

A {

Letter-spacing:0

Background:pink

}

Link 1

Link 2

Link 3

Link 4

⑥ uses word-spacing.

Div {

Word-spacing:-6px

}

A {

Word-spacing:0

Background:pink

}

Link 1

Link 2

Link 3

Link 4

Thank you for reading this article carefully. I hope the editor will share the question "how does CSS remove the spacing between inline-block elements?" This article is helpful to everyone. At the same time, I hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.