width和padding之間的關係介紹

antzone發表於2017-03-23
padding

本章節簡單介紹一下width和padding之間的關係。

主要的疑惑在於，width到底包不包含padding，其實他們的關係非常的單純，根本不搭調。

之所以會有很多朋友將其搞混是因為他們將width屬性和元素的寬度這兩個概念混為一談了。

width屬性值並不一定就是元素的實際寬度，看如下程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#top{
  width:300px;
  height:150px;
  background:#CCC;
  margin-bottom:20px;
}
#bottom{
  width:300px;
  height:150px;
  background:#CCC;
  margin-bottom:20px;
  padding-left:50px;
}
</style>
</head>
<body>
<div id="top">螞蟻部落</div>
<div id="bottom">螞蟻部落</div>
</body>
</html>

從上面的程式碼可以看到width就是width，padding就是padding。

相關文章