padding 百分比 參考物件

admin發表於2020-03-31
padding物件

關於 padding 內邊距基礎知識可以參閱CSS padding 內邊距一章節。

百分比可以作為 padding 屬性值，既然是百分比必定有一個尺寸參考物件。

下面看一段程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
.box {
  width: 180px;
  height: 80px;
  padding: 10px;
  border: 2px dotted #ccc;
}
.ant {
  width: 80px;
  padding: 10% 20%;
  border: 2px dotted green;
  font-size: 12px;
  color:green;
}
</style>
</head>
<body>
<div class="box">
  <div class="ant">螞蟻部落</div>
</div>
</body>
</html>

上述程式碼採用百分比方式設定 ant 內邊距，上下內邊距 10% ，左右內邊距 20%。

簡單列舉一下可能存在的幾種錯誤計算方式：

（1）.上下內邊距以父元素 height 為參考，左右內邊距以父元素 width 為參考。

（2）.上下內邊距以自身 height 為參考，左右內邊距以自身 height 為參考。

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/202003/31/092926mijiklmpin1ro07k.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

結論是，如果以百分比為屬性值，參考尺寸是塊級父元素的寬度值，各個方位都是如此。

相關文章