css margin叠加问题

时间：2022-07-02 12:17:24 编辑：袖梨来源：一聚教程网

w3c认为margin叠加是合理的。不管是不是bug，但是这个问题真的存在。看下面这个例子：

< !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=UTF-8" /> 
head><head> 
<style type="text/css"> 
*{padding:0;margin:0;}  
.box{background:#ccc; }  
.content{background:#eee;margin: 20px auto;}  
.an-box{ margin:50px auto;background:#999999;}  
style> 
head> 
<body> 
<div class="box"> 
<div class="content">margin: 20px autodiv> 
<div class="content">margin: 20px autodiv> 
div> 
<div class="box"> 
<div class="content">margin: 20px autodiv> 
div> 
<div class="box"> 
<div class="content">margin: 20px autodiv> 
div> 
<div class="an-box">margin: 50px autodiv> 
body> 
html>

解决这个问题的方法有不少，先来看看这个，在外层的容器中加：overflow:hidden;zoom:1；

< !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=UTF-8" /> 
head><head> 
<style type="text/css"> 
*{padding:0;margin:0;}  
.box{background:#ccc; overflow:hidden;zoom:1 }  
.content{background:#eee;margin: 20px auto; }  
.an-box{ margin:50px auto;background:#999999;}  
style> 
head> 
<body> 
<div class="box"> 
<div class="content">这里两个还是存在叠加margin: 20px autodiv> 
<div class="content">这里两个还是存在叠加margin: 20px autodiv> 
div> 
<div class="box"> 
<div class="content">margin: 20px autodiv> 
div> 
<div class="box"> 
<div class="content">margin: 20px autodiv> 
div> 
<div class="an-box">margin: 50px autodiv> 
body> 
html>

还有外层的容器中加边框属性，在叠加元素加空块状元素等等。。还有就是用padding来取代margin

推荐专题

最新下载

热门教程

css margin叠加问题

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程