padding和margin在span中不好用

admin發表於2017-11-23
padding

可能標題的問題並不被所有人認同，有的可能覺得padding和margin是好用的，而有的卻認為是不好用的。

下面通過例項分別介紹一下兩個屬性在span中到底好不好用。

一.padding屬性:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>CSS教程</title>
<style type="text/css">
span{
  border:1px solid red;
}
.first{
  padding:20px;
}
.second{
  padding-left:20px;
  padding-right:20px;
}
</style>
</head>
<body>
  <span class="first">螞蟻部落</span> 
  <span class="second">螞蟻部落</span>
</body>
</html>

可以看出第一個span設定的padding並沒有完全正確的得到渲染，而是上邊框無法顯示，可能在某些瀏覽器中，下邊框也不能顯示。第二個span設定的左右內邊距都是正常的。由此可以得出，預設狀態下，span的左右內邊距是好用的，上下內邊距可能產生問題。

二.margin屬性:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>CSS教程</title>
<style type="text/css">
div{
  width:200px;
  height:100px;
  border:1px solid blue;
}
span{
  border:1px solid red;
}
.first{
  margin:20px;
}
.second{
  margin-left:20px;
  margin-right:20px;
}
</style>
</head>
<body>
  <div><span class="first">螞蟻部落</span></div>
  <div><span class="second">螞蟻部落</span></div>
</body>
</html>

其實margin和padding是一樣的，也是左右外邊距是有效的，上下外邊距可能出現問題。

解決這個問題的方法很簡單，就是讓span變為塊級元素或者塊級內聯元素即可。

相關文章