css margin叠加问题

作者：袖梨 2022-07-02

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

  1. < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
  5. head><head> 
  6. <style type="text/css"> 
  7. *{padding:0;margin:0;}  
  8. .box{background:#ccc; }  
  9. .content{background:#eee;margin: 20px auto;}  
  10. .an-box{ margin:50px auto;background:#999999;}  
  11. style> 
  12. head> 
  13. <body> 
  14. <div class="box"> 
  15. <div class="content">margin: 20px autodiv> 
  16. <div class="content">margin: 20px autodiv> 
  17. div> 
  18. <div class="box"> 
  19. <div class="content">margin: 20px autodiv> 
  20. div> 
  21. <div class="box"> 
  22. <div class="content">margin: 20px autodiv> 
  23. div> 
  24. <div class="an-box">margin: 50px autodiv> 
  25. body> 
  26. html> 

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

 

  1. < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
  5. head><head> 
  6. <style type="text/css"> 
  7. *{padding:0;margin:0;}  
  8. .box{background:#ccc; overflow:hidden;zoom:1 }  
  9. .content{background:#eee;margin: 20px auto; }  
  10. .an-box{ margin:50px auto;background:#999999;}  
  11. style> 
  12. head> 
  13. <body> 
  14. <div class="box"> 
  15. <div class="content">这里两个还是存在叠加margin: 20px autodiv> 
  16. <div class="content">这里两个还是存在叠加margin: 20px autodiv> 
  17. div> 
  18. <div class="box"> 
  19. <div class="content">margin: 20px autodiv> 
  20. div> 
  21. <div class="box"> 
  22. <div class="content">margin: 20px autodiv> 
  23. div> 
  24. <div class="an-box">margin: 50px autodiv> 
  25. body> 
  26. html> 

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

相关文章

精彩推荐