Inline-Blöcke: Erkundung ihrer räumlichen Eigenschaften
P粉360266095
2023-08-22 19:42:53
<p>Es gibt eine seltsame Lücke zwischen Inline-Blöcken. Ich kann damit leben, bis ich mit einem AJAX-Aufruf weitere Inhalte lade und diese kleine Lücke verschwindet. Ich weiß, dass mir hier etwas fehlt. </p>
<pre class="brush:php;toolbar:false;">div {
Breite: 100px;
Höhe: automatisch;
Rand: 1 Pixel durchgehend rot;
Umriss: 1 Pixel durchgehend blau;
Rand: 0;
Polsterung: 0;
Anzeige: Inline-Block;
}</pre>
<p>http://jsfiddle.net/AWMMT/</p>
<p>Wie sorgt man für einen konsistenten Abstand zwischen Inline-Blöcken? </p>
http://jsfiddle.net/AWMMT/1/
你的空格是浏览器在显示时转换成“空格”的换行符。
或者你可以尝试使用CSS进行一些小的调整:
一个flexbox会方便地忽略其子元素之间的空格,并且会类似于连续的inline-block元素进行显示。
http://jsfiddle.net/AWMMT/470/
空格在HTML中。有几种可能的解决方案。从最好到最差:
float: left
而不是display: inline-block
,但这会对高度产生不良影响:http://jsfiddle.net/AWMMT/3/font-size
设置为0,并为内部元素设置适当的font-size
:http://jsfiddle.net/AWMMT/4/ - 这非常简单,但是您无法利用内部元素上的相对字体大小规则(百分比,em)