Top

vertical-align与line-height的学习

1.vertical-align:对block元素设置middle无效，对图片、按钮、strong有效

2.匿名的inline-box默认基线会影响block高度

3.line-height && font-size 消除上图间隙

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vertical-Align</title>
    <style type="text/css">
        p ,img { margin: 0; padding: 0;}
        p { border: 1px solid gray;  background:blue;}
        p img { vertical-align: top;}

        div { background:green; line-height: 240px; font-size: 0;   }
        div img { vertical-align: middle; }
    </style>
</head>
<body>
    <p>
        <img src="./images/aragorn.png"> Aragorn V-A对块状元素无感
    </p>

    <div>
        <img src="./images/aragorn.png" class="div-img"/>
         Aragorn DIV 你好！！！
    </div>
</body>
</html>

文章来源：vertical-align && line-hight 基友关系

posted @ 2016-07-05 14:36  Avenstar  阅读(178)  评论(0)    收藏  举报