快捷導(dǎo)航

CSS填充和寬高詳解

更新時(shí)間：2023年01月30日 08:40:29 作者：千鋒教育

這篇文章主要介紹了CSS填充和寬高詳解的相關(guān)資料,需要的朋友可以參考下

CSS 填充屬性用于在一個(gè)元素的內(nèi)容周?chē)a(chǎn)生空間，也就是邊框內(nèi)到內(nèi)容外之間的距離。可以通過(guò) padding-top，padding-right，padding-bottom，padding-left 等屬性設(shè)置元素的上邊、右邊、下邊和左邊的內(nèi)填充。

所有的 padding 屬性都有以下值：

length - 以 px、pt、cm 等為單位指定填充。比如 10px，24pt，0.5cm等。

% - 以父元素寬度的百分比來(lái)指定填充。比如 10%。

零基礎(chǔ)學(xué)前端之CSS填充和寬高_(dá)CSS

length 和 % 都可以取負(fù)值，表示減少內(nèi)部填充的空間大小。

創(chuàng)建 018-css-padding-width-height 文件夾，在文件夾下創(chuàng)建 padding-width-height.html 文件，和 mystyle.css文件。打開(kāi) html，構(gòu)建基礎(chǔ)代碼。引入外部樣式。添加一個(gè) div 元素，填入一些文本。

打開(kāi) mystyle.css 文件，定義 div 選擇器，聲明樣式：border: 1px solid black，background-color: lightblue，padding-top: 50px，padding-right: 30px，padding-bottom: 50px，padding-left: 80px。

在瀏覽器中查看效果。在 Styles 頁(yè)簽里，點(diǎn)擊容器布局示意圖的 padding 區(qū)域，四個(gè)方向的內(nèi)填充清楚顯示了。

CSS
div {
  border: 1px solid black;
  background-color: lightblue;
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}

零基礎(chǔ)學(xué)前端之CSS填充和寬高_(dá)選擇器_02

零基礎(chǔ)學(xué)前端之CSS填充和寬高_(dá)選擇器_03

為了簡(jiǎn)化代碼，可以在一個(gè) padding 屬性中指定所有的填充屬性。

如果 padding 取四個(gè)值，比如 padding： 25px 50px 75px 100px，則表示：頂部填充為 25px，右邊填充 50px，底部填充 75px，左邊填充 100px。注意書(shū)寫(xiě)順序是上右下左，每個(gè)值用空格隔開(kāi)。

如果 padding 取三個(gè)值，比如 padding: 25px 50px 75px，則表示：頂部填充 25px，左右兩邊填充 50px，底部填充 75px。

如果 padding 取兩個(gè)值，比如 padding: 25px 50px，則表示：頂部和底部填充 25px，左右兩邊填充 50px。

如果 padding 取一個(gè)值，比如 padding: 25px，則表示：所有四個(gè)方向填充都是25px。

改寫(xiě)一下填充的樣式。注釋掉原來(lái)的代碼，重新定義樣式：padding: 50px 30px 50px 80px。

我們看，效果是一樣的！

如果一個(gè)元素有指定的寬度，那么加在該元素上的填充，就會(huì)加到該元素的總寬度上。

我們來(lái)驗(yàn)證一下。

在HTML里添加一個(gè) h1 標(biāo)簽，填入一些文本。在CSS里定義 h1 選擇器，把 div 元素的邊框和背景樣式拷貝過(guò)來(lái)，再給它添加樣式 width: 300px。也給 div 添加一個(gè) width: 300px 的樣式。

看效果，div 比 h1 明顯寬很多，因?yàn)樽笥业膬?nèi)填充會(huì)增加容器的寬度。h1 的寬度為 300+2，共302px，div 的寬度為 300+30+80+2，共 412px。

CSS
h1 {
  width: 300px;
  border: 1px solid black;
  background-color: lightblue;
}
div {
  width: 300px;
  border: 1px solid black;
  background-color: lightblue;
  /* padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px; */
  padding: 50px 30px 50px 80px;
}

零基礎(chǔ)學(xué)前端之CSS填充和寬高_(dá)CSS_04