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

文: jack同学

jiack同学

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

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

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

你可能感兴趣的:(行内元素垂直对齐以及图片底部白边问题(CSS查漏补缺))