为了账号安全,请及时绑定邮箱和手机立即绑定

vertical-align

请问一下span1为什么会与底部对齐?

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

        body{margin:0;}

        .box{

        border:1px solid black;

        }

        .span1{

        background:red;

        font-size:50px;

        }

        .span2

        {

        background:blue;

        font-size:20px;       

        }

        .span3

        {

        background:yellow;

        font-size:100px;

        vertical-align:bottom;

        }

        </style>

    </head>

    <body>

    <div class="box">

    <span class="span1">xxh</span>

    <span class="span2">x</span>

    <span class="span3">xxh</span>

    x  

    </div>

    </body>

</html>


正在回答

1 回答

因为demo中三个元素(span1,span2和x)的默认对齐方式都是(baseline),且span1的font-size最大(span1:50px,span2:20px,x:24px(左右)),所以span1靠最底,以span1的文字底为baseline对齐,反过来,你把span1和span2的font-size数值对换下,那么结果span2就会与底对齐了

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

vertical-align

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信