HTML中子行内元素比父块级元素偏下的原因

我的Y同学

于 2021-12-07 22:23:32 发布

阅读量283

点赞数 1

分类专栏：前端文章标签： html css

本文链接：https://blog.csdn.net/qq_44251163/article/details/121780193

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

块级元素的字体默认大小为16px，如果将在其中嵌套的行内元素的字体大小设置的小于16px，会由于基线对齐的原因导致行内元素下移去达成基线对齐。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        .box {
            height: 41px;
            background-color: aquamarine;
        }
        .box a {
            /* 由于box的默认字号是16px,此时如果将a标签的字号设置成14px
                ,会和16px的文本沿着基线对齐,a标签会偏下*/
            font-size: 14px;
            display: inline-block;
            height: 41px;
            background: pink;
        }
    </style>
</head>
<body>
    <div class="box">
        <a href="##">标准间</a>
        <a href="##">超大床房</a>
        <a href="##">豪华总统套房</a>
    </div>
</body>
</html>

在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

我的Y同学

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML中子行内元素比父块级元素偏下的原因

块级元素的字体默认大小为16px，如果将在其中嵌套的行内元素的字体大小设置的小于16px，会由于基线对齐的原因导致行内元素下移去达成基线对齐。<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <style type="text/css"> .box { height: 41
复制链接

扫一扫