margin外邊距疊加簡單程式碼例項

admin發表於2017-04-01

本章節分享一段程式碼例項，它演示了外邊距合併這個現象。

更多關於外邊距合併的內容可以參閱margin外邊距合併詳解一章節。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css">
div {
  color:black;   
  background: #ccc;   
  margin-top: 50px;   
  margin-bottom: 30px;  
  width:500px; 
  height: 50px; 
  line-height:50px;  
  border: 1px solid red;   
}
 
</style>
</head>
<body>
<div>螞蟻部落歡迎您，歡迎提供各種意見</div>
<div>本站的url地址是softwhy.com</div>
<div>只有努力奮鬥才會有美好的未來</div>
</body>
</html>

上下外邊距會產生合併現象，如果不合並的話，上下的距離是80px,但是由於合併，所以選取較大的那個margin值，所以上下相距的尺寸是50px。

相關文章