求助 display:inline-block;?。。。?/h1>
<!DOCTYPE?html>
<html>
<head>
<meta?http-equiv="Content-Type"?content="text/html;?charset=gb2312"?/>
<title>頁碼的制作</title>
<style?type="text/css">
/*在此定義相關CSS樣式*/
.page{
????height:40px;
????line-height:40px;
????text-align:center;
}
.page?a{
????display:inline-block;
????text-decoration:none;
????border:1px?solid?#E8E8E8;
????margin:5px;
????padding:5px?10px;
????font-size:14px;
????font-family:"微軟雅黑";
}
.page?a:link,.page?a:visited{
????color:#000;
}
.page?a:hover,.page?a:active{
????color:#FFF;
????background-color:#F00;
}
????
</style>
</head>
<body>
<!--在此制作頁碼的基本結構-->
<div?class="page">
????<a?href="#">首頁</a>
????<a?href="#"><</a>
????<a?href="#">1</a>?
????<a?href="#">2</a>
????<a?href="#">3</a>
????<a?href="#">...</a>
????<a?href="#">></a>
????<a?href="#">末頁</a>
</div>
</body>
</html>為什么我一把display:inline-block;加進去 ，a標簽就變大了?。?！
<!DOCTYPE?html>
<html>
<head>
<meta?http-equiv="Content-Type"?content="text/html;?charset=gb2312"?/>
<title>頁碼的制作</title>
<style?type="text/css">
/*在此定義相關CSS樣式*/
.page{
????height:40px;
????line-height:40px;
????text-align:center;
}
.page?a{
????display:inline-block;
????text-decoration:none;
????border:1px?solid?#E8E8E8;
????margin:5px;
????padding:5px?10px;
????font-size:14px;
????font-family:"微軟雅黑";
}
.page?a:link,.page?a:visited{
????color:#000;
}
.page?a:hover,.page?a:active{
????color:#FFF;
????background-color:#F00;
}
????
</style>
</head>
<body>
<!--在此制作頁碼的基本結構-->
<div?class="page">
????<a?href="#">首頁</a>
????<a?href="#"><</a>
????<a?href="#">1</a>?
????<a?href="#">2</a>
????<a?href="#">3</a>
????<a?href="#">...</a>
????<a?href="#">></a>
????<a?href="#">末頁</a>
</div>
</body>
</html>為什么我一把display:inline-block;加進去 ，a標簽就變大了?。?！
2016-06-09
塊級元素設置margin和padding是正常的， 內聯(lián)元素設置margin和padding的上下是無效的，當你把display:inline-block;加進去后a標簽上的padding:5px（這個就會起作用的） 10px; 所以看起來a標簽就變大了