脚本宝典收集整理的这篇文章主要介绍了为什么两个行内块元素(内联元素)之间有空格,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
如题,这是学习前期经常遇到的问题,所以就来讲讲为什么,怎么办。
首先先做一个 demo 出来,看问题是否存在。
<div class="father">
<div class="son1"></div>
<div class="son2"></div>
</div>
.father {
width: 200px;
height: 50px;
border: 1px solid red;
}
.son1 {
display: inline-block;
width: 50px;
height: 50px;
background-color: #652373;
}
.son2 {
display: inline-block;
width: 50px;
height: 50px;
background-color: #74BF75;
}
果然,中间有一道缝隙哈,现在我们来看看为什么。
用 JS 打印打印 father 盒子的所有子元素看看。
<script>
let father = document.querySelector('.father');
console.log(father.childNodes);
</script>
再看看这个 text 究竟是啥。
没错,它竟然是两个子 div 之间的换行+后面的一系列空格。。。
这也是 HTML 自身的特性了。
这是我最推荐的方式。
缺点是没有缺点!
如代码所示,给两个子元素加上浮动。
注意,这里就要把两个子元素中 display:inline-block 的语句删掉了,float 属性中就带有这个效果。
.son1 {
float: left;
width: 50px;
height: 50px;
background-color: #652373;
}
.son2 {
float: left;
width: 50px;
height: 50px;
background-color: #74BF75;
}
客户说效果很好,腿都不酸了。
<div class="father">
<div class="son1"></div><div class="son2"></div>
</div>
效果同样,可以实现,但是正常人都不习惯这么写。
<div class="father">
<div class="son1"></div><!--
--><div class="son2"></div>
</div>
我想正常人更不会这么写了。。
但是效果还是杠杠的。
.father {
width: 200px;
height: 50px;
border: 1px solid red;
font-size: 0;
}
做的很好,下次不许再这么做了。。
因为通常元素中都是由文字的。你把字的大小设置为0,虽然没有缝隙了,但是其他字也显示不了了。
第一种,浮动是最好的。
第二三钟,不加空格或者把空格注释掉,会破坏代码的可读性和优美。
第四种,将父元素的字大小设置为0,不推荐使用。
以上是脚本宝典为你收集整理的为什么两个行内块元素(内联元素)之间有空格全部内容,希望文章能够帮你解决为什么两个行内块元素(内联元素)之间有空格所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。