css設定span元素的尺寸

admin發表於2017-03-04
CSS

在預設狀態下是無法設定span元素的尺寸的，只能夠根據內容的尺寸自適應，也就是說給span元素設定width和height屬性預設條件是無效的。之所以會出現這種情況是因為span元素是內聯元素，內聯元素無法設定尺寸的，只要設定為塊級或者內聯塊級元素即可。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>    
<html>    
<head>    
<meta charset=" utf-8">    
<meta name="author" content="http://www.softwhy.com/" />    
<title>螞蟻部落</title>    
<style type="text/css">
#antzone{
  width:200px;
  height:100px;
  background:green;
  display:block;
}
</style>    
</head>  
<body>  
<span id="antzone"></span> 
</body>    
</html>

以上程式碼將span元素新增display:block屬性之後，可以將其設定為塊級元素，也就能夠設定尺寸了，也可以使用display:inline-block將其設定為內聯塊級元素，也可以實現同樣的功能。

相關文章