标签:清除 检索 基线 margin 底部 块级元素 大小 splay line
有时候,我们在添加图片img标签后并没有给该标签设置magrin属性的margin-bottom值,在有些浏览器中打开就会出现图像底部留白,为什么为造成这个原因?下面就来进行分析:由于img元素默认为inline元素,而inline元素的vertical-align属性的默认值为baseline文字基线对齐,正好图片底部的留白就是baseline和bottom之间的距离。最后就给大家分享一下针对该问题的解决方法。
我们都知道图片img标签默认为内联(inline)元素,把img标签设置为块元素就可以解决底部留白问题。
如:img{display:block;}
相信很多小伙伴对vertical-align这个属性有种很模糊的概念,和text-align属性作用的对象易混淆:首先text-align是设置或检索对象中文本的对齐方式(左、中、右);vertical-align则是用于指定元素(inline元素)的上下垂直对齐方式(顶部、中间、底部、基线)。再回到刚刚这个问题,我们通过给图片添加垂直对齐方式来解决底部留白。
如: img{vertical-align:top} (vertical-align值根据具体情况来规定:top、middle、botom)
如:img的父元素为div,那么只需要给div添加一个font-size属性并设置值为0即可。但是此方法会让父元素div中的其他子元素继承font-size属性,导致文字无法显示,这样就会出现一些隐性错误,那么再针对性的给需要的子元素单独添加font-size属性。
如果父元素规定了固定的宽高,图片大小就会跟随父元素而定,则可以给父元素添加overflow属性:overflow:hidden ;
给图片设置浮动(float)或者定位(position)属性也能够解决地不留白问题,原理和方法一类似,就是通过添加 float 或 position 属性来改变display属性,被隐式变为块级元素了。
注:使用浮动的话最后要清除浮动
由于浏览器会解析空格,故可以通过消除空格来解决问题,但是这个方法我们一般推荐,因为这样会使页面代码更加混乱,排版不清晰
标签:清除 检索 基线 margin 底部 块级元素 大小 splay line
原文地址:https://www.cnblogs.com/zsp-1064239893/p/10987825.html