一 我們都知道，對於行內元素可以設置 padding-left padding-right margin-left margin-right，可以將其和與之一行的元素擠開一定的距離，一般我們認爲行內元素不能設置margin和padding的top 和 bottom，其實這些是可以的，只是，對於行內元素設置這些屬性沒有太大的意義，我稱之爲”殘疾的盒模型“
二 那麼 什麼是”殘疾的盒模型“呢？
來看一下demo:
<style type="text/css">
.one{
width: 300px;
height: 100px;
border:1px solid red;
margin-top: 150px;
}
.one a {
padding: 100px 50px;
margin-top: 50px;
line-height: 100px;
background: pink;
}
.two {
width: 300px;
height: 100px;
background: green;
}
</style>
</head>
<body>
<div class="one">第一個盒子
<a href="">購物車</a>
</div>
<div class="two">第二個盒子</div>
</body>
a 標籤的盒模型如下：
通過以上demo可以看出來，其實堆行內元素設置top bottom 的padding和margin 是可以的，只是
第一：設置的margin-top bottom基本上屬於被瀏覽器拋棄置之不理的狀態；
第二：設置了padding-top bottom的行內元素，背景渲染的時候依然會渲染上，但是不會擠開其他盒子的內容了。
第三：padding margin - left right 還是可以擠開盒子的 左右距離的。
三 順便總結下最讓人噁心的line-height屬性吧 ，看定義：line-height該屬性會影響行框的佈局。在應用到一個塊級元素時，它定義了該元素中基線之間的最小距離而不是最大距離。
line-height 與 font-size 的計算值之差（在 CSS 中成爲“行間距”）分爲兩半，分別加到一個文本行內容的頂部和底部。可以包含這些內容的最小框就是行框。
W3C上明確說了用在塊級元素上，但是，如果我用在行內元素上呢？其實效果是一樣的
走個demo:
<style type="text/css">
.one{
width: 300px;
height: 100px;
border:1px solid red;
margin-top: 150px;
}
.one a {
padding: 100px 50px;
margin-left: 50px;
margin-top: 50px;
line-height: 60px;
background: pink;
}
.two {
width: 300px;
height: 100px;
background: green;
}
.three {
width: 300px;
height: 20px;
background: blue;
}
</style>
</head>
<body>
<div class="one">
第一個盒子<a href="">購物車</a>
<div class="three">第三個盒子</div>
</div>
<div class="two">第二個盒子</div>
</body>
-height 與 font-size 的計算值之差（在 CSS 中成爲“行間距”）分爲兩半，分別加到一個文本行內容的頂部和底部。
注意這句話，走你。。。。。來看效果，不是讓你走的。。。。（大家可以在瀏覽器裏面改下line-height的值看下變化
去掉line-height 的效果圖
實踐出真知，針織衫真保暖。咯咯。
結論1 行內元素還是可以設置line-height的，行內元素的padding值可以被背景渲染的。
去掉 a 標籤的 padding: 100px 50px;試下效果：
.one a {
margin-left: 50px;
margin-top: 50px;
line-height: 60px;
background: pink;
}
結論2 行內元素的line-height屬性並不能使該元素的背景被渲染出來。
結論3 我想去趟廁所，憋了有一會了，對不起，pangguang ! 你們看不到刪除線的文字吧!
