Question

在声明“#message a”中，我有一个看起来像这样的样式填充

padding: 2px 15px;

那么当外观没有变化时，填充顶部和底部的重点是什么。即使我将填充更改为

"padding: 100px 15px;"

这100px的外观没有任何变化。这15px是正确的，并且在外观上做了一些改变。

<!DOCTYPE>
<html>
<head>
<title>Chapter 3: Expandable Rows</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
body 
{
   margin:5px;
   padding: 0;
   font-family: Arial, sans-serif;
   font-size: small;
   text-align: center;
   width: 768px;
}

#register 
{ 
float: left;
width: 100%;
margin:0;
padding: 0;
list-style: none;
color: #690;
background: #BDDB62;
}

#register a 
{
text-decoration: none;
color: #360;
}

#reg 
{
float: left;
margin: 0;
padding: 8px 14px;
}

#find 
{
float: right;
margin: 0;
padding: 8px 14px;
} 

#message 
{
    clear:both;
    font-weight: bold;
    font-size:110%;
    color:#fff;
    text-align: center;
    background: #92B91C;
}


#message p 
{
margin: 0;
padding: 8px 14px;
}

#message strong 
{
text-transform: uppercase;
}

#message a 
{
margin: 0 0 0 6px;
padding: 2px 15px;
text-decoration: none;
font-weight: normal;
color: #fff;
}

</style>
</head>

<body>

<ul id="register">
    <li id="reg">Not registered? <a href="#">Register</a> now!</li>
    <li id="find"><a href="#">Find a store</a></li>
</ul>

<div id="message">
    <p><strong>Special this week:</strong> $2 shipping on all orders! <a 
 href="#">LEARN MORE</a></p>
</div>`enter code here`
</body>
</html>

Answer 1

锚标记是一个内联元素，因此它不会显示垂直填充。

虽然填充只能应用于内联元素的所有边左右填充将对周围内容产生影响。

要查看应用的垂直填充，请将a更改为display:inline-block。

#message a{
   padding: 2px 15px;
   display: inline-block;
}

示例 http://jsfiddle.net/sL7kT/

See this article on how CSS properties are applied to inline elements

Answer 2

简单a标签无法通过宽度，高度，填充等进行调整。

添加：display: inline-block;以生成内联块。

#message a {
    display: inline-block;
    padding: 100px 10px;
}

演示：http://jsfiddle.net/eAxsh/

Answer 3

你在段落标签中有你的标签，所以它的父级的行高是你的段落标签..所以如果你给它垂直填充它不会应用...而是在你的标签上使用内联块< / p>

填充2px顶部和底部有什么意义

3 个答案: