H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【Web前端问题】子元素行高通过继承父元素行高获得,并且给子元素设置display为内联块,父元素的高度比子元素要高几个像素

子元素行高通过继承父元素行高获得,并且给子元素设置display为内联块,由于要解决内联块行内布局的3像素bug,所以给父元素设置了font-size:0;但是最后的实际效果确是父元素比子元素高几个个像素。。。。求大神告知原因;代码如下,css全部写在行内方便看。

<div style="line-height: 60px;background: red;font-size: 0;">
    <span style="display: inline-block;background: black;font-size: 22px;color: white;">子元素</span>
    <span style="display: inline-block;background: black;font-size: 22px;color: white;">子元素</span>
</div>

实际效果也贴出来:

clipboard.png

clipboard.png

clipboard.png

望大神告诉我原因,我遇到这个问题好多次,百度了好多天没有任何头绪。。。。
经过我测试的解决办法:
1.去掉父元素的font-size:0; 但是会出现内联块的bug,由于我需要行内块布局,所以不考虑改变display。
2.将父元素的行高去掉分别写在子元素内即可。

到底是什么原因导致父元素高度比子元素高啊。。。。头痛。。。。

回答:

https://zhuanlan.zhihu.com/p/…

回答:

要解决这个问题,你把外层divline-height去掉,spanline-height加上就好了。

  <div style="background: red; font-size: 0;">
    <span style="display: inline-block; line-height: 60px; background: black; font-size: 22px; color: white;">子元素</span>
    <span style="display: inline-block; line-height: 60px; background: black; font-size: 22px; color: white;">子元素</span>
  </div>

回答:

子元素span加上 vertical-align: top;
所有的inline,inline-block都会受到line-height、font-size以及vertical-align的共同影响。其中若inline-block没设置高度和line-height,而是父标签设置了line-height,则必须设置vertical-align,设置下vertical-align:top或者 bottom 或者其他任意一种对齐方式都可以解决。

本文地址:H5W3 » 【Web前端问题】子元素行高通过继承父元素行高获得,并且给子元素设置display为内联块,父元素的高度比子元素要高几个像素

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址