垂直对齐（vertical-align）
默认: baseline -- 一行内文本的下方。
默认: 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>
524
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
