源于一道簡單的面試題：
行內(nèi)元素和塊級元素的區(qū)別是什么？
在總結(jié)的時(shí)候發(fā)現(xiàn)越寫越多哎垦，干脆就單獨(dú)拉出來做一個(gè)記錄吧
在查閱中參考了很多人總結(jié)的資料抖剿，這里都有提到
格式上的區(qū)別
- 行內(nèi)元素會(huì)在
一條直線上排列，在同一行水平方向排列 - 塊級元素各占據(jù)一行仑荐，
垂直方向排列阎曹。 - 默認(rèn)情況下，行內(nèi)元素不會(huì)以新行開始煞檩，而塊級元素會(huì)新起一行处嫌。
內(nèi)容上的區(qū)別
- 一般情況下，行內(nèi)元素只能包含
數(shù)據(jù)和其他行內(nèi)元素斟湃。 - 而塊級元素可以包含
行內(nèi)元素和其他塊級元素熏迹。這種結(jié)構(gòu)上的包含繼承區(qū)別可以使塊級元素創(chuàng)建比行內(nèi)元素更”大型“的結(jié)構(gòu)。
注：這里的一般情況下是HTML4規(guī)范的說法
Paste_Image.png
在搜索這個(gè)問題的時(shí)候凝赛，在知乎發(fā)現(xiàn)了這樣一個(gè)問題 a 標(biāo)簽為什么能夠包含塊級元素注暗？
這里引用下高票回答，結(jié)合回答便對這個(gè)問題有了更好的認(rèn)識(shí)
Paste_Image.png
width/height/padding/margin 屬性上的區(qū)別
這里先要理解替換元素與非替換元素的概念
從元素本身的特點(diǎn)來講墓猎，可以分為替換和不可替換元素捆昏。
- 替換元素
替換元素就是瀏覽器根據(jù)元素的標(biāo)簽和屬性，來決定元素的具體顯示內(nèi)容毙沾。
例如：瀏覽器會(huì)根據(jù)<img>標(biāo)簽的src屬性的值來讀取圖片信息并顯示出來骗卜，
又如根據(jù)<input>標(biāo)簽的type屬性來決定是顯示輸入框，還是單選按鈕等左胞。
HTML中的<img>寇仓、<input>、<textarea>烤宙、<select>遍烦、<object>都是替換元素。這些
元素往往沒有實(shí)際的內(nèi)容躺枕，即是一個(gè)空元素服猪，瀏覽器會(huì)根據(jù)元素的標(biāo)簽類型和屬
性來顯示這些元素。
- 不可替換元素
HTML 的大多數(shù)元素是不可替換元素拐云，即其內(nèi)容直接表現(xiàn)給用戶端（例如瀏覽器）蔓姚。例如<p>是一個(gè)不可替換元素，文字“段落的內(nèi)容”全被顯示慨丐。
以下是結(jié)論：
- 塊級元素width/height/margin的四個(gè)方向/padding的四個(gè)方向都正常顯示坡脐，遵循標(biāo)準(zhǔn)的css盒模型，如div房揭。
- 行內(nèi)替換元素width/height/margin的四個(gè)方向/padding的四個(gè)方向都正常顯示备闲，遵循標(biāo)準(zhǔn)的css盒模型晌端，如img，input恬砂。
- 行內(nèi)非替換元素width/height不起作用咧纠，用line-height來控制高度，大部分行內(nèi)元素均為行內(nèi)非替換元素泻骤，如span漆羔，a，i狱掂，label等演痒。
- 行內(nèi)非替換元素padding左右起作用，上下不會(huì)影響行高趋惨，但是對于有背景色和內(nèi)邊距的行內(nèi)非替換元素鸟顺，背景可以向元素上下延伸，但是行高沒有改變器虾。因此視覺效果就是與前面的行重疊讯嫂。
- 行內(nèi)非替換元素margin左右作用起作用，上下不起作用兆沙，這是由于行內(nèi)非替換元素的外邊距不會(huì)改變一個(gè)元素的行高欧芽。
對于行內(nèi)非替換元素舉一個(gè)可視化栗子
html代碼如下
<body>
<div class="top">上方元素</div>
<div class="container">
<span class="test">被有padding和margin的span包裹的文字內(nèi)容</span>
<span>普通文字內(nèi)容</span>
</div>
</body>
css代碼如下
.top {
height: 100px;
width: 600px;
background: #eee;
}
.container {
width: 600px;
background: #ddd;
}
.test {
background: #ccc;
margin: 20px;
padding:20px;
}
效果圖
Paste_Image.png
Paste_Image.png
我們發(fā)現(xiàn)雖然行內(nèi)元素（這里指非替換元素）的padding和margin可以被設(shè)置，但是
- 設(shè)置的margin-top bottom被瀏覽器忽略了葛圃，不會(huì)對其它元素產(chǎn)生影響
- 設(shè)置的padding-top bottom由于不改變行高所以不會(huì)改變元素的上下位置渐裸，但實(shí)際上是存在的,從背景色可以看出。
對于行內(nèi)替換元素可以從下面的圖片看出装悲，其margin和padding均有效昏鹃，比如我們可以看出父容器被多撐出了margin + padding 的高度
參考資料：
https://www.zhihu.com/question/34952563
http://www.cnblogs.com/mabelstyle/p/3715891.html
https://www.w3.org/TR/html401/struct/global.html#h-7.5
CSS 權(quán)威指南
