2

在声明“#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>
4

3 回答 3

4

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

虽然内边距可以应用于内联元素的所有侧面，但只有左右内边距会对周围的内容产生影响。

a要查看应用的垂直填充，请将display:inline-block.

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

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

请参阅这篇文章，了解如何将 CSS 属性应用于内联元素。

于 2013-08-08T09:57:38.020 回答
1

简单a的标签不能通过宽度、高度、填充等进行调整。

添加：display: inline-block;制作锚点内联块。

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

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

于 2013-08-08T09:58:29.610 回答
0

你在段落标签中有你的标签，所以它遵守它的父母的行高，这是你的段落标签..所以如果你给它垂直填充它不会应用..而不是在你的标签上使用 inline-block

于 2013-08-08T10:00:23.393 回答