vertical-align属性解决元素间有间隙和对不齐问题--小技巧

vertical-align属性：

  设置元素的垂直对齐方式

    vertical-align: baseline; 将元素放在父元素的基线上 默认值
    vertical-align: top; 顶端对齐
    vertical-align: middle; 中部对齐
    vertical-align: bottom; 底部对齐

    vertical-align: super;上标 <sup></sup>
    vertical-align: sub; 下标 <sub></sub>

  使用——图片下方间隙问题

    将图片转成块级元素，解决下方间隙;
    为图片设置垂直对齐方式(vertical-align属性)，解决下方间隙；
    为图片的父元素设置高度，并添加overflow属性，解决下方间隙；
    为图片的父元素设置font-size属性或line-height属性，属性值为0，解决下方间隙问题：

  使用——文本框和按钮不对齐现象--解决行内块间空白问题的三种方式

vertical-align：middle；	对齐方式
display：black；			转换块级
font-size：0px；			设置字体大小

浮动也可以解决

演示


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrap{
            height: 110px;
            border-bottom: 1px solid #000;
        }
        .wrap img{
            height: 110px;
        }
        .wrap2 img{
            vertical-align: baseline;
        }
        .wrap3 img{
            vertical-align: top;
        }
        .wrap4 img{
            vertical-align: middle;
        }
        .wrap5 img{
            vertical-align: bottom;
        }
        .txt1 span{
            vertical-align: super;
        }
        .txt2 span{
            vertical-align: sub;
        }
    </style>
</head>
<body>
    <div class="wrap wrap1">
        <img src="images/pic01.jpg" alt="pic"> vertical-align: ;
    </div>
    <div class="wrap wrap2">
        <img src="images/pic01.jpg" alt="pic"> vertical-align: baseline;
    </div>
    <div class="wrap wrap3">
        <img src="images/pic01.jpg" alt="pic"> vertical-align: top;
    </div>
    <div class="wrap wrap4">
        <img src="images/pic01.jpg" alt="pic"> vertical-align: middle;
    </div>
    <div class="wrap wrap5">
        <img src="images/pic01.jpg" alt="pic"> vertical-align: bottom;
    </div>
    <br>
    <p class="txt1">3<span>2</span></p>
    <p>3<sup>2</sup></p>
    <p class="txt2">H<span>2</span>O</p>
    <p>H<sub>2</sub>O</p>
    <br><br><br><br><br>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrap{
            float: left;
            border: 1px solid #000;
            margin-right: 10px;
            margin-bottom: 10px;
        }
        /* 将图片转成块级元素，解决下方间隙： */
        .wrap2 img{
            display: block;
        }
        /* 为图片设置垂直对齐方式，解决下方间隙： */
        .wrap3 img{
            vertical-align: top;
            vertical-align: middle;
            vertical-align: bottom;
        }
        /* 为图片的父元素设置高度，并添加overflow属性，解决下方间隙： */
        .wrap4{
            height: 252px;
            overflow: hidden;
        }
        /* 为图片的父元素设置font-size属性或line-height属性，属性值为0，解决下方间隙问题： */
        .wrap5{
            /* font-size: 0; */
            line-height: 0;
        }
    </style>
</head>
<body>
    <div class="wrap"><img src="images/pic01.jpg" alt="pic"></div>
    <div class="wrap wrap2"><img src="images/pic01.jpg" alt="pic"></div>
    <div class="wrap wrap3"><img src="images/pic01.jpg" alt="pic"></div>
    <div class="wrap wrap4"><img src="images/pic01.jpg" alt="pic"></div>
    <div class="wrap wrap5"><img src="images/pic01.jpg" alt="pic"></div>
</body>
</html>

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        /* 属性选择器： */
        .fo1 input[type=text]{/*找.fo1元素中的input元素，并且input元素中有type属性，且属性值为text*/
            height: 20px;
            vertical-align: top;
        }
        .fo1 input[type=submit]{
            height: 24px;
            vertical-align: top;
        }

        .fo2{
            overflow: hidden;
        }
        .fo2 input[type=text]{
            height: 20px;
            float: left;
        }
        .fo2 input[type=submit]{
            height: 24px;
            float: left;
        }
    </style>
</head>
<body>
    <form class="fo1" action="#">
        <input type="text"><input type="submit" value="提交">
    </form>
    <br>
    <form class="fo2" action="#">
        <input type="text">
        <input type="submit" value="提交">
    </form>
</body>
</html>

 

posted @ 2020-02-19 12:52  JackieDYH  阅读(37)  评论(0)  编辑  收藏  举报  来源