css 盒模型的內邊框

2021-10-09 15:12:57 字數 790 閱讀 8945

內邊距(padding)

- 內容區和邊框之間的距離是內邊距

- 一共有四個方向的內邊距:

padding-top

padding-right

padding-bottom

padding-left

- 內邊距的設定會影響到盒子的大小

- 背景顏色會延伸到內邊距上

一共盒子的可見框的大小,由內容區 內邊距 和 邊框共同決定,

所以在計算盒子大小時,需要將這三個區域加到一起計算

padding 內邊距的簡寫屬性,可以同時指定四個方向的內邊距

規則和border-width 一樣

<

!doctype html>

"en"

>

"utf-8"

>

"viewport" content=

"width=device-width, initial-scale=1.0"

>

盒模型-內邊距<

/title>

.box1

.inner

<

/style>

<

/head>

="box1"

>

="inner"

>

<

/div>

<

/div>

<

/body>

<

/html>

css 盒模型的邊框

邊框 邊框的寬度 border width 邊框的顏色 border color 邊框的樣式 border styleborder width 10px 預設值,一般都是 3個畫素 border width可以用來指定四個方向的邊框的寬度 值的情況 四個值 上 右 下 左 三個值 上 左右 下 兩個...

boder的內邊框 CSS 邊框

邊框的寬度 為邊框指定寬度有兩種方法 可以指定長度值,比如 2px 或 0.1em 或者使用 3 個關鍵字之一,它們分別是 thin medium 預設值 和 thick。注釋 css 沒有定義 3 個關鍵字的具體寬度,所以乙個使用者 可能把 thin medium 和 thick 分別設定為等於 ...

CSS盒模型之內邊距padding

css 盒模型 box model 規定了元素框處理元素內容 內邊距 邊框 和 外邊距 的方式。元素框的最內部分是實際的內容,直接包圍內容的是內邊距 padding 內邊距呈現了元素的背景。內邊距的邊緣是邊框 border 邊框以外是外邊距 margin 外邊距預設是透明的,因此不會遮擋其後的任何元...