關于CSS Padding那些你意想不到的用法示例

2024-07-11 08:32:33

字體：大中小

來源：轉載

供稿：網友

瀏覽器支持
所有瀏覽器都支持 padding 屬性。
注釋：任何的版本的 Internet Explorer （包括 IE8）都不支持屬性值 "inherit"。

定義和用法
padding 簡寫屬性在一個聲明中設置所有內邊距屬性。

說明
這個簡寫屬性設置元素所有內邊距的寬度，或者設置各邊上內邊距的寬度。行內非替換元素上設置的內邊距不會影響行高計算；因此，如果一個元素既有內邊距又有背景，從視覺上看可能會延伸到其他行，有可能還會與其他內容重疊。元素的背景會延伸穿過內邊距。不允許指定負邊距值。
注釋：不允許使用負值。（以上來自w3school）

padding變化是否會影響容器的尺寸

1.對于block元素

如果寬度非auto那么容器會變大，如果容器寬度自適應或者設置了box-sizing:border-box,并且值在可控區間內是不會影響內容寬度的，如果值暴走那么容器肯定會變化。

復制代碼

代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>DEMO</title>
<style>
*{padding: 0;margin: 0;}
.test {width: 300px;background: blue;box-sizing: border-box;padding:0 300px;}
.test2 {width: 300px;background: yellow;}
</style>
</head>
<body>
<div class="test">文字在那里</div>

<div class="test2">文字在那里</div>
</body>
</html>

效果圖

上面的代碼運行說明了當padding值暴走的時候里面的文本只按照最小的單個字體作為一行content區域的寬度已經被充沒了。

2. 對于內聯元素

內聯元素的padding只會影響左右尺寸，上下尺寸不影響但是背景色會顯現，當上下值暴走的時候會影響外容器的高度。
利用這一特性我們可以做類似于：注冊 | 登陸這種中間的間隔線

復制代碼

代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>DEMO</title>
<style>
*{padding: 0;margin: 0;}
span {padding: 12px 4px 2px;margin-left: 8px;border-left:2px solid;font-size:0;}
</style>
</head>
<body>
注冊<span></span>登陸
</body>
</html>

效果圖