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

This article mainly introduces "how to remove the gap caused by inline-block newline in CSS". In daily operation, I believe many people have doubts about how to remove the gap caused by inline-block newline in CSS. Xiaobian consulted all kinds of information and sorted out simple and easy operation methods. I hope to help you answer the question of "how to remove the gap caused by inline-block newline in CSS"! Next, please follow the small series to learn together!

Inline-block causes gaps when used

Inline-blocks can be treated like inline elements, can be simply arranged horizontally, and can be given horizontal and vertical widths, etc. This is a very convenient setup, so it can be of many uses.

But at the same time, we often encounter so-called gap problems in the process of using inline-block. Let's look at an example.

HTML

CSS

.container{

display:block;

border:1px#000solid;

}

.inline-contents{

width:33.3333%;

height:200px;

display:inline-block;

background-color:#66b6d5;

}

The effects are as follows:

From the picture above, we can clearly see that there is no set value on the right and bottom, but there is a gap.

Therefore, the three boxes with width: 33.333%(that is, 1/3 or less) should be arranged horizontally, but the last box has a different row.

Even if box-sizing, margin, and padding are set to 0 this time, there is no change.

Inline-block as the side of inline elements is not only a matter of "horizontal arrangement", but may also affect values such as font-size and line-height.

At this point, the study of "how to remove the gap caused by inline-block newline in CSS" is over, hoping to solve everyone's doubts. Theory and practice can better match to help everyone learn, go and try it! If you want to continue learning more relevant knowledge, please continue to pay attention to the website, Xiaobian will continue to strive to bring more practical articles for everyone!

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.