CSS手册padding-top padding-bottom的问题

luyaoweb commented 6 years ago

行内样式也可以给padding-top padding-bottom 不需要转为内联块或者块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            line-height: 200px;
        }
        a ,span{

            background: #ccc;
            padding-top: 100px;
            padding-bottom: 100px;
        }
        p>span{
            padding-top: 50px;
            padding-bottom: 50px;
            background: #55a532;
        }
    </style>
</head>
<body>
<a href="">内联元素</a>
<span>sss</span>
<p><span>文字</span></p>
</body>
</html>

Yurioncoding commented 6 years ago

内联元素虽然可以设置padding但是对于布局没有什么帮助。

doyoe commented 6 years ago

@luyaoweb CSS spec 确实如你所说的，不需要转化为内联块或者块，但是早期的很多浏览器并没有实现这一点（手册很多时候会以实情情况作为经验来去解释），不过现在看起来大部分都已经实现了这一点，所以新版本会去掉这些限制性的描述，参见新版本：http://css.doyoe.com/properties/dimension/padding.htm

需要注意的是，虽然不需要转化为内联块或者块，但是给内联元素设置纵向的内补白并不会影响布局（内补白会在当前元素的行框基础上向顶部和顶部外延，但是这些外延不会拓展新的布局大小）

doyoe / css-handbook

CSS手册padding-top padding-bottom的问题 #144