同一行内，两个行内块标签，一个加入文字后，顶部不对齐

原因：

行内块元素的默认对齐方式是：与文字的基线对齐。
元素加入文字，导致没有加入文字的行内块元素对齐到文字的基线。

解决方法：

方法1.修改行内块元素对齐方法：加入：vertical-align: top;
方法2：没有文字的元素加入 文字，以毒攻毒。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        div {
            display: inline-block; 
            width: 100px;
            height: 100px;
            border: 2px solid red;
        }
        div:last-child{
            vertical-align: top;
        }
       

    </style>
</head>
<body>
    <div>我歌且谣</div>
    <div></div>
    <div>我歌且谣</div>
</body>
</html>

CSS 的属性 vertical-align 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。

posted @ 2022-05-17 16:21  我歌且谣  阅读(186)  评论(0)  编辑  收藏  举报