每個html標簽元素都有其默認的元素類型，主要包括兩大類:inline內聯元素、block塊元素。除默認為以上兩種，還有部分標簽元素叫可變元素，會根據上下文語境決定該元素為inline元素或是block元素。在css里，有一個display的屬性，他規定元素應該生成的框的類型。可能的值有很多，inline、block、inline-block,其中inline-block是在css2.1里新增的值。具有這個值的元素，我們可以把它叫做inline-block元素。
一.inline元素、block元素、inline-block元素的具體解釋
inline元素
inline元素全稱Inline Elements，英文原意:An inline element does not start on a new line and only takes up as much width as necessary.一個內聯元素不會開始新的一行，並且只占有必要的寬度。
特點:
和其他元素都在一行上；
元素的高度、寬度、行高及頂部和底部邊距不可設置；
元素的寬度就是它包含的文字或圖片的寬度，不可改變。
block元素
block元素全稱Block-level Elements，英文原意:A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).一個塊級元素總是開始新的一行，並且占據可獲得的全部寬度(左右都會盡可能的延伸到它能延伸的最遠)
特點:
每個塊級元素都從新的一行開始，並且其后的元素也另起一行。（一個塊級元素獨占一行）;
元素的高度、寬度、行高以及頂和底邊距都可設置;
元素寬度在不設置的情況下，是它本身父容器的100%（和父元素的寬度一致），除非設定一個寬度。
inline-block元素
inline-block元素，英文釋義:inline-block elements are like inline elements but they can have a width and a height.它像內聯元素，但具有寬度和高度。
特點:
和其他元素都在一行上；
元素的高度、寬度、行高以及頂和底邊距都可設置
二.常見的inline元素、block元素、inline-block元素
常見的inline內聯元素：
span、img、a、lable、input、abbr（縮寫）、em（強調）、big、cite（引用）、i（斜體）、q（短引用）、textarea、select、small、sub、sup，strong、u（下划線）、button（默認display：inline-block））
常見的block塊級元素：
div、p、h1…h6、ol、ul、dl、table、address、blockquote、form
常見的inline-block內聯塊元素：
img、input
三.的inline元素、block元素、inline-block元素的區別
塊級元素會獨占一行，而內聯元素和內聯塊元素則會在一行內顯示。
塊級元素和內聯塊元素可以設置 width、height 屬性，而內聯元素設置無效。
塊級元素的 width 默認為 100%，而內聯元素則是根據其自身的內容或子元素來決定其寬度。
————————————————
版權聲明：本文為CSDN博主「天心天地生」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/tianxintiandisheng/java/article/details/82715923