Home > Article > Web Front-end > How to remove gaps caused by CSS inline-block line breaks
There is a problem with the use of inline elements and inline block elements, that is, a blank will be formed when displaying line breaks that exist in the source code. This article will introduce to you how to eliminate CSS The inline-block newline causes the gap.
The reason for gaps when using inline-block
inline-block can be processed like inline elements, can be simply arranged horizontally, and can give horizontal Width and vertical width etc. This is a very convenient setup, so it can be used in a lot of ways.
But at the same time, we often encounter the so-called gap problem when using inline-block. Let's take a look at an example
HTML
<div class="container"> <div class="inline-contents"></div> <div class="inline-contents"></div> <div class="inline-contents"></div> </div>
CSS
.container { display: block; border: 1px #000 solid; } .inline-contents { width: 33.3333%; height: 200px; display: inline-block; background-color: #66b6d5; }
The effect is as follows:
From the above picture we can clearly see that there are no values set on the right and bottom, but there are gaps
Therefore, the three boxes with width: 33.3333% (that is, less than 1 / 3) should be arranged horizontally, but the last box is on a new line.
Even if box-sizing is set this time, margin and padding are set to 0, there is no change.
inline - block as the side of the inline element is not only a matter of "horizontal arrangement", but may also affect values such as font-size and line-height.
How to eliminate the gaps in inline - block
The gaps that can appear below are the default settings for letters, the baseline is as shown, so you can use the properties to try Leave a little gap below.
(So if you apply vertical-align: bottom; to .inline-contents, it will only fix the gap issue below.)
next to The gap is due to the line changes between , so it can be solved by removing them all, but the code will look very complicated. Although you can write comments between , it may be a bit troublesome. In fact, just Writing a "font-size: 0;" value in the parent element (.container) solves the problem.
Why do we say it is a parent element? Because the element itself with inline-block set has the characteristics of "character".
Let’s look at an example
HTML
<div class="container"> <div class="inline-contents">aaa </div> <div class="inline-contents">aaa<br> aaa </div> <div class="inline-contents">aaa</div> </div>
CSS
.container { display: block; border: 1px #000 solid; font-size: 0; } .inline-contents { width: 33.3333%; height: 200px; display: inline-block; background-color: #66b6d5; font-size: 16px; }
Enter text in inline-block At this time, if the new inlin-block sets font-size, it will be fine.
However, if the number of lines of text in each box is different, this will happen.
In this case, solve it by adding vertical-align: bottom; and font-size to inline-block.
CSS
.container { display: block; border: 1px #000 solid; font-size: 0; } .inline-contents { width: 33.3333%; height: 200px; display: inline-block; background-color: #66b6d5; font-size: 16px; vertical-align: bottom; }
The effect is as follows:
This article ends here, more exciting content for you You can pay attention to the CSS video tutorial column on the php Chinese website! ! !
The above is the detailed content of How to remove gaps caused by CSS inline-block line breaks. For more information, please follow other related articles on the PHP Chinese website!