保定网站制作系统,网页升级访问网页导航,wordpress 4.3.1,收录网址教程多个图片排列展示#xff0c;水平和垂直方向的间隔如何消除 垂直方向
vertical-align
原因#xff1a; vertical-align属性主要用于改变行内元素的对齐方式#xff0c;行内元素默认垂直对齐方式是基线对齐#xff08;baseline#xff09; 这是因为图片属于行内元素…多个图片排列展示水平和垂直方向的间隔如何消除 垂直方向
vertical-align
原因 vertical-align属性主要用于改变行内元素的对齐方式行内元素默认垂直对齐方式是基线对齐baseline 这是因为图片属于行内元素而行内元素的默认垂直对齐方式是基线对齐baseline这是给文本预留了部分显示空间——基线与底线之间的距离这部分空间会被某些文本占用。 垂直对齐方式可以用四种不一样的准线进行描述。以下图所示基线和底线之间还留有部分距离。 因为默认的对齐方案是按照英文的基线对齐在不对垂直对齐方式进行调整的状况下图片底部默认是和文本基线对齐baseline的因为基线对齐所以图片的下方就会产生一条空白缝隙的状况。 总结 给 img 标签设置样式vertical-align:top/middle/bottom/baseline基线默认值可控制当前img元素之前 / 后的文本行内行内块与本 img 的垂直对齐方式。通常项目中会把img的vertical-align设置为非基线以防止图片底部出现空白间隙。
把img标签转为块级元素 display: block
因为这个空隙是因为行内元素引发的而且vertical-align属性是只有行内元素或行内块元素才有的css属性img属于行内块元素所以使用 vertical-align 垂直对齐方式的前提是作用对象必须是行内元素 / 行内块元素 , 否则垂直对齐效果不生效 , 也就是基线对齐不生效 。
所以将img标签显示方式改为块级元素也可以解决图片底部空白间隙问题但要注意的是改变块级元素之后图片会独占一行可能会影响布局。
———————————————— 版权声明本文为CSDN博主「儒雅的烤地瓜」的原创文章遵循CC 4.0 BY-SA版权协议转载请附上原文出处链接及本声明。 原文链接
总结
产生原因由于img元素默认的垂直对齐方式为基线对齐vertical-aligh: baseline。 解决方法
给img标签添加样式 vertical-align: middle|top|bottom给img标签添加样式 display: block
水平方向
原因 在HTML中img标签是行内元素它们之间的空格或换行符会被解析为文本节点。这些文本节点会占据一定的空间导致img标签之间产生缝隙的现象。
将父容器的font-size设置为0。这样可以使img标签之间的空格不再占据空间从而消除缝隙。使用浮动为img标签添加浮动使它们脱离文档流从而消除缝隙。需要注意的是浮动可能会影响其他元素的布局需要根据实际情况进行调整。使用负的margin或padding为img标签设置负的margin或padding使它们的边距重叠从而消除缝隙。需要根据实际情况调整负的margin或padding的值。【不推荐】使用flexbox布局将img标签放置在flex容器中并使用flex布局来管理它们的位置。这样可以自动消除缝隙。 5. 使用注释在img标签之间加入注释将其解析为HTML注释节点从而消除缝隙。
