分類  >  Web前端 >

空缺外邊距互相疊加

tags:    時間:2013-12-10 15:16:30
空白外邊距互相疊加

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標題文檔</title>
<style>
body{width:300px; font-family:'微軟雅黑'; font-size:1em; text-indent:10px; line-height:1.25}
div{background:#a40000;margin:10px;
}
div p{background:#eee;margin:15px}
</style>
</head>
<body>
<div><p>空白邊距疊加demo</p></div>
</body>
</html>

這是一個div元素內嵌套p的簡單樣例,看上面的代碼會以為是這樣的效果

在瀏覽器中打開.你會驚訝的發現,它呈現給你的效果是這樣的:

解決方法:

一、為外圍元素定義透明邊框.具體到本例,即在樣式div中加入border:1px solid transparent;註:在IE6裡面會產生黑色邊框。

二、為外圍元素定義內邊距填充..具體到本例,即在樣式div中加入padding:1px

三、用到清除浮動:具體到本例,即在樣式div中加入zoom:1; overflow:hidden;

 

 

由於編輯器無法很好的上傳圖片下面附件為兩個效果圖

推薦閱讀文章

Bookmark the permalink ,來源:互聯網