HTML中行內元素的豎直方向的padding和margin是否真的無效

時間 2019-11-20

標籤 html 中行元素豎直方向 padding margin 是否無效欄目 HTML 简体版

原文原文鏈接

參考資料：Inline elements and paddingcss

今天寫一個導航欄時遇到了一個問題：行內元素的padding-top，padding-bottom和margin-top,margin-bottom是否是真的是無效的？html

接下來就這個問題將具體分析：app

1.行內元素擁有盒子模型麼

答案是是的。沒錯，行內元素跟塊級元素同樣，一樣擁有盒子模型。ide

2.行內元素的padding-top，padding-bottom和margin-top,margin-bottom是否無效

答案一樣是是的。盒子模型的width，height和padding-top，padding-bottom和margin-top,margin-bottom設置都是無效的。可是...字體

3.實戰探討行內元素的padding-top，padding-bottom和margin-top,margin-bottom

先來看兩個實例：spa

example1：

源碼：code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>example1</title>
<style type="text/css">
*{
  margin:0px;
  padding:0px;
  text-decoration:none;
  list-style:none;
}
#main{
  min-width:1280px;
  background-color:pink;
  margin:auto;
  height:800px;
}
nav{
  height:50px;
  background-color: #ffffff;
}
nav ul li{
  height:50px;
  float:left;
  background-color: #ffffff;
}
a{
  line-height:50px;
  padding:30px;
  margin:30px;
  background-color:green;
  font-size:14px;
  color:rgb(231,79,77);
}
</style>
</head>
<body>
<div id="main">
<header>
    <nav>
        <ul>
            <li><a class="hnav" href="#">首頁</a></li>
            <li><a class="hnav" href="#">最新活動</a></li>
            <li><a class="hnav" href="#">項目介紹</a></li>
            <li><a class="hnav" href="#">愛心社區</a></li>
            <li><a class="hnav" href="#">關於咱們</a></li>
        </ul>
    </nav>
</header>
</div>
</body>
</html>

效果（不會作點連接彈出demo的效果，會的大神求教）：htm

看效果圖：連接元素a的父元素li以及nav元素的高度都是50px，且都爲白色背景，可是設置a的css樣式爲padding:30px以後，發現高度超過了白色區域（即50px），按照行內元素的盒子模型理論，應該是padding-top和padding-bottom都是無效的，然而這裏卻有效了麼？先來看另一個例子：blog

example2：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>example2</title>
<style type="text/css">
*{
  margin:0px;
  padding:0px;
}
span{
  color:black;
  padding:50px;
  margin:50px;
  border:3px solid black;
}
.pone{
  color:blue;
}
.ptwo{
  color:tomato;
}
</style>
</head>
<body>
    <p class="pone">
    test 1<span>test span</span>test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 
    </p>
    <p class="ptwo">test 2 test 2 test 2 test 2 test 2 test 2 test 2 test 2 test 2 test 2 test 2 test 2test 2 test 2 test 2 test 2 test 2 test 2 test 2 test 2 test 2 test 2 test 2 test 2 test 2 test 2 test 2 test 2 test 2 test 2</p>
</body>
</html>

效果：element

又是個奇怪的現象，我在截取另外一張圖，其餘都同樣，只是test 1部分的數量大量增長：

是的效果如上圖，咱們能夠看到span設置的margin確實符合行內元素的盒子模型，水平方向外邊距有效，豎直方向外邊距無效，可是對於padding彷佛是水平和垂直方向都有效，但咱們仔細看上述example1和example2的兩張圖：example1中，咱們設置的padding-top和padding-bottom是相等的，那麼若是豎直方向的內邊距真的有效，那麼content的字體就應該居中，事實上並非；example2中，咱們無視邊框的存在，能夠看到豎直方向的內邊距看不到任何效果，只有水平方向外邊距有效。所以，行內元素豎直方向內邊距確實是無效的

查w3c的官方文檔並無找到這個奇葩現象解釋（可能我英語比較爛，沒找到），後來在一篇老外的文章裏找到了答案：

While padding can be applied to all sides of an inline element, only left and right padding will have an effect on surrounding content. In the example below, 50px of padding has been applied to all sides of the element. As you can see, it has an affect on the content on each side, but not on content above or below

這段話基本解釋了上述現象，當咱們使用內邊距時，只有左右方向有效；當咱們設置四個方向的內邊距時，對於該行內元素，確實顯示出效果，可是豎直方向的內邊距只有效果，對其餘元素無任何影響。

所以，行內元素的padding-top，padding-bottom和margin-top,margin-bottom是真的是無效；不過要注意一點，對於豎直方向的內邊距該行內元素的內容範圍是增大了，不過只是表象，對周圍元素無任何影響。

轉載請註明原文地址並標明轉載：http://www.cnblogs.com/mingjiezhang/p/5373667.html