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

Question

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

padding: 2px 15px;

因此，在外观没有变化的情况下，在顶部和底部进行填充有什么意义？ 即使我将填充更改为

"padding: 100px 15px;"

这100px不会改变外观。 这15像素是正确的，并在外观上有所更改。

<!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/

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

Answer 2

简单地a标签不能由宽度，高度，填充等来调整..

添加： display: inline-block; 使锚内联块。

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

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

Answer 3

您在段落标记中有一个标记，因此它遵守其父标记的行高，这就是您的段落标记..因此，如果您提供垂直填充，它将不适用..而是在标记上使用inline-block

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

问题描述

3 个解决方案

解决方案1
4 已采纳 2013-08-08 09:57:38

解决方案2
1 2013-08-08 09:58:29

解决方案3
0 2013-08-08 10:00:23

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

问题描述

3 个解决方案

解决方案1 4 已采纳 2013-08-08 09:57:38

解决方案2 1 2013-08-08 09:58:29

解决方案3 0 2013-08-08 10:00:23

解决方案1
4 已采纳 2013-08-08 09:57:38

解决方案2
1 2013-08-08 09:58:29

解决方案3
0 2013-08-08 10:00:23