行內元素屬性設定

2021-09-24 07:33:20 字數 696 閱讀 4074

行內元素同樣具有盒子模型,那麼就可以給行內元素設定不同的 css 屬性,比如寬度、高度、內邊距和外邊距,那麼行內元素是否需要設定這些屬性呢?

給行內元素設定寬度和高度是無效的

.span1 

'span1'>行內元素設定寬度和高度

複製**

此時我們通過觀察頁面以及盒子的渲染出來的模型,可以發現:

即使給行內元素設定了寬度和高度,行內元素所表現出來的具體的寬度和高度就是內容本身的寬度和高度,所以給行內元素設定寬和高是無效的

將影響左右,但不影響上下

'span2'>行內元素設定邊距上下屬性

.span2

複製**

從上面的圖我們可以發現,我們給行內元素設定了 padding-top、padding-bottom、margin-top、margin-bottom 屬性,但是這些屬性並沒有發生具體的作用,在效果上看貌似是被撐開了,但是並沒有對其他的元素造成影響。

會發生效果

'span3'>行內元素設定邊距左右屬性

.span3

複製**

從上圖可以看出,如果我們給行內元素設定 padding-left,padding-right,margin-left,margin-right 屬性 將會影響該行內元素的位置

行內元素 塊元素 行內塊元素 及其屬性

行內元素可以在一行顯示,但是不能設定上下的padding和margin值。塊級元素可以設定 width,height屬性,行內元素設定width,height無效 塊級元素可以設定margin 和 padding.行內元素的水平方向的padding left,padding right,margin...

塊級元素 行內元素 display屬性

定義位址 定義 標題 定義列表中定義條目 定義文件中的分割槽或節 定義列表 定義列表中的專案 定義乙個框架集 建立 html 表單 定義最大的標題值描述 none 此元素不會被顯示。block 此元素將顯示為塊級元素,此元素前後會帶有換行符。inline 預設。此元素會被顯示為內聯元素,元素前後沒有...

行內和塊級元素區別 如何讓行內元素設定寬高

1.行內元素與塊級函式可以相互轉換,通過修改display屬性值來切換塊級元素和行內元素,行內元素display inline,塊級元素display block。2.行內元素和其他行內元素都會在一條水平線上排列,都是在同一行的 塊級元素卻總是會在新的一行開始排列,各個塊級元素獨佔一行,垂直向下排列...