美文网首页让前端飞Web前端之路
行内元素垂直对齐以及图片底部白边问题(CSS查漏补缺)

行内元素垂直对齐以及图片底部白边问题(CSS查漏补缺)

作者: hijackli | 来源:发表于2019-06-21 01:35 被阅读3次

文: jack同学

jiack同学
  • 问题:很多时候布局,多个行盒排列时垂直方向上对齐时不一致的

    • 解决:使用vertical-align属性设置行盒,可以设置middle,top, bottom, 还有数值(如 -4px / 6px); 这些基本上可以解决大部分的问题了。注意这个属性不具有继承性
  • 图片底部白边问题

    • 问题:当块盒包裹图片的时候,图片底部和块盒底部之间是有间隙的,这个间隙根据字体大小变大而间隙扩大。
    • 解决:给图片父元素设置font-size: 0; 不好的是,如果块盒内部还有其它文字时,会造成影响。
    • 第二种方法是给图片设置display: block;让图片变成块盒,这种方法没有副作用
  • 具体产生这些问题的原因是挺细的问题,暂时了解这些就足够了。有兴趣的可以了解一下

相关文章

网友评论

    本文标题:行内元素垂直对齐以及图片底部白边问题(CSS查漏补缺)

    本文链接:https://www.haomeiwen.com/subject/weqeqctx.html