为什么有些内联（行内）元素可以设置宽高？
為什么有些內(nèi)聯(lián)（行內(nèi)）元素如img、input可以設(shè)置寬高？
在說明之前我們先來了解一些定義。
塊級元素和內(nèi)聯(lián)元素：
①塊級元素總是獨占一行，表現(xiàn)為另起一行開始，而且其后的元素也必須另起一行顯示。
寬度(width)、高度(height)、內(nèi)邊距(padding)和外邊距(margin)都可控制。
塊級元素主要有:
address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li
②內(nèi)聯(lián)元素不會以新行開始，和相鄰的內(nèi)聯(lián)元素在同一行。
一般情況下，寬度(width)、高度(height)、內(nèi)邊距的top/bottom(padding-top/padding-bottom)和外邊距的top/bottom(margin-top/margin-bottom)都不可改變，只能改變左右邊距。
內(nèi)聯(lián)元素主要有:
a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var
③可變元素，根據(jù)上下文關(guān)系確定該元素是塊元素還是內(nèi)聯(lián)元素：
applet , button , del , iframe , ins , map , object , script
一般情況下，行內(nèi)元素只能包含數(shù)據(jù)和其他行內(nèi)元素，而塊級元素可以包含行內(nèi)元素和其他塊級元素。
?
置換元素(替換元素)和非置換元素(不可替換元素)：
①置換元素
一個
內(nèi)容不受 CSS視覺格式化模型控制，CSS渲染模型不考慮對其內(nèi)容的渲染，且元素本身一般擁有固有尺寸（寬度，高度，寬高比）的元素，被稱之為置換元素。瀏覽器會根據(jù)元素的標簽和屬性，來決定置換元素的具體顯示內(nèi)容。
它們所具有的特征為：在不使用css修飾時，元素的標簽和屬性也會影響元素的顯示。
例如，瀏覽器會根據(jù)<img>標簽的src屬性的值來讀取圖片信息并顯示出來，而如果查看(x)html代碼，則看不到圖片的實際內(nèi)容；<input>標簽的type屬性決定是顯示輸入框，還是單選按鈕等。
html(5)中的置換元素有 <img>、<input>、<textarea>、<select>、<object>、<
iframe> 和 <canvas> 等。置換元素在其顯示中生成了框，這就是有些內(nèi)聯(lián)元素能夠設(shè)置寬高的原因。
②非置換元素
html 的大多數(shù)元素是非置換元素，除置換元素之外，所有的元素都是非置換元素。非置換元素內(nèi)容直接表現(xiàn)給瀏覽器。
例如：<label>label中的內(nèi)容</label>?標簽<label>是一個非置換元素，文字“l(fā)abel中的內(nèi)容”將全被顯示。
?
塊級元素/行內(nèi)元素的寬高和邊距設(shè)置問題：
塊級元素可以設(shè)置寬度(width)、高度(height)、內(nèi)邊距(padding)和外邊距(margin)。
行內(nèi)置換元素可以設(shè)置寬度(width)、高度(height)、內(nèi)邊距(padding)和外邊距(margin)。
行內(nèi)非置換元素可以設(shè)置左右內(nèi)邊距(padding
-right/ padding-left)和左右外邊距( margin-right/ margin-left)。實例：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8" /> <title>padding</title> <style> .test { width: 200px; height: 50px; padding: 10px; border: 1px solid #000; box-sizing: border-box; } </style> </head> <body> <div class="test">塊級元素</div> <input class="test" type="button" value="行內(nèi)置換元素"/> <br /> <label class="test">行內(nèi)非置換元素</label> <br /> 文本 </body> </html>結(jié)果：
一些邊距規(guī)則：
①所有元素（除
table-row-group | table-header-group | table-footer-group | table-column-group | table-row外）都可以設(shè)置橫向內(nèi)邊距(padding -right/ padding-left)；所有元素（除 table-row-group | table-header-group | table-footer-group | table-column-group | table-row?和 行內(nèi)非置換元素?之外）都可以設(shè)置縱向內(nèi)邊距（padding-top/padding-bottom）。②所有元素（除?
非table | inline-table | table-caption的表格類元素之外）都可以設(shè)置橫向外邊距（margin-right/margin-left）；所有元素（除? 非table | inline-table | table-caption的表格類元素 和 行內(nèi)非置換元素?之外）都可以設(shè)置縱向外邊距（margin-top/margin-bottom）。③當我們?yōu)樾袃?nèi)非置換元素設(shè)置縱向內(nèi)邊距（padding-top/padding-bottom）或縱向外邊距（margin-top/margin-bottom）時，如果不將之轉(zhuǎn)化為行內(nèi)塊（inline-block）或者塊級（block）元素，那么它的縱向邊距屬性不會影響布局。上、下邊距會在當前元素的行框基礎(chǔ)上向頂部和底部外延，但是這些外延不會拓展新的布局大小。
④如果元素的position不是static | relative或者float不是none或者該元素是根元素，當display: inline | inline-block | run-in | table-*系時，display的計算值為block。也就是說，絕對定位或者浮動的內(nèi)聯(lián)元素，實際表現(xiàn)為塊級元素，可以設(shè)置寬高和邊距。
本文轉(zhuǎn)載于:猿2048?https://www.mk2048.com/blog/blog.php?id=0jbchaa&title=為什么有些內(nèi)聯(lián)（行內(nèi)）元素可以設(shè)置寬高？
創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎總結(jié)
以上是生活随笔為你收集整理的为什么有些内联（行内）元素可以设置宽高？的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
