图片在块级元素中的对齐问题（取消图片在垂直和水平方向上的空隙）

来源：互联网发布：加内特职业生涯总数据编辑：程序博客网时间：2024/05/16 11:28

垂直对齐（vertical-align）
默认: baseline -- 一行内文本的下方。

middle -- 一行内小写字母的高度的1/2

如果让文本垂直居中，需要把其放置在inline,inline-block.

图片在块级元素中是默认以基线对齐，而基线与块级元素的边界是有一定的距离，并不美观。为了解决这个问题，可以将图片设置成vertical-align，使图片与小写字母二分之一处对齐，不用靠基线对齐，就可以让图片边界和块级元素的边界之间的缝隙消失。当然了，前提是父元素没有指定高度了。

在解决竖起方向上的缝隙后，还需要考虑水平方向上的缝隙。两img元素标签之间的换行符会导致水平方向上的两图片之间产生缝隙。可以把换行符取消，但不美观。所以用注释符号来取代换行符。这样就取消水平方向上的空隙了。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style type="text/css">        body{padding: 0; margin: 0;}        div{ background-color: yellowgreen;}        img{  width: 220px;/*            问题一： 行内元素与父元素底边有空隙            原因：行内元素 默认是基线(baseline)对齐            解决：设置 vertical-align: middle;            */            vertical-align: middle;        }        span{            background-color: red;             border: 1px solid;        }    </style></head><body>    <div>        <!--问题二：通过注释方式，消除因换行导致的 行内元素间的空隙-->        x<img src="img/jd001.jpg" alt=""><!--        --><img src="img/jd001.jpg" alt=""><span>Hello</span>        <span>World</span>    </div></body></html>

阅读全文

0 0