css - padding-top 不起作用，但 padding-right 是

Question

这是我的CSS:

body { 
margin: 0px;
background-color: white;
}

#navbar { 
background-color: red;
margin: 0 auto;
width: 900px;
height: 200px;
}

#navbar a { 
padding: 20px;
color: grey;
text-decoration: none;
font-weight: bold;
font-size: 20px;
}

导航栏是 body 内的一个 div，我在导航栏内有几个标签。

这是输出:

Answer 1

“ block 级”元素和“内联元素”之间存在差异。根据基本概念，“内联元素”的边距和填充仅在水平方向中有效，但在垂直方向中无效。

您的 Div 是 block 级元素，但 anchor 标记 是内联元素。给垂直空间使它成为一个 block 元素，正如您已经发现的那样，或者将 anchor 放在一个 div 中，它具有“填充”或“边距”形式的垂直空间!

div a {display:block;padding:20px;} OR div a{display:inline-block;padding:20px;}

在后两种情况下，填充现在也会在垂直方向上起作用，因为现在已经从内联形式转换为 block 级元素。希望，这有帮助!