首页 > 代码库 > css margin

css margin

2024-07-19 05:32:20   221人阅读

　　诚实地面对自己，知之为知之，不知为不知。

好像看了几篇博客，不过懂得东西，吸收到的只有这么点...

css中margin边界叠加问题：

　　看个同方向和异方向margin重叠现象：

<!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" /><title>无标题文档</title><style type="text/css">  body { background-color:#CFC} .outer{ margin: 30px;  width: 300px; background-color:#669; } .inner1{ margin: 30px; padding: 8px; background-color:#3CF; color: white;} .inner2{ margin: 30px; padding: 8px; background-color:#96F; color: white; }</style></head><body><div class="outer"><div class="inner1">margin1</div><div class="inner2">margin2</div></div></body></html>

效果为：

　　　　　　　　  　　图1

这里inner1与outer的上边距重叠了，inner1的下边界与inner2的上边界重叠了，inner2的下边距与outer的下边距重叠了

参考这里的解决办法:margin边界重叠问题

只知道如何解决同方向margin重叠问题：

①给外部的div添加清除浮动相同的样式即可。常用的样式代码为：overflow:hidden; zoom:1;

 .outer{ margin: 30px;  width: 300px; background-color:#669;overflow:hidden; zoom:1}

效果将如下：

　　　　　　　　　　　图2

②增加些边缘属性。例如padding值，padding:1px;或是border属性，border:1px solid #cacbcc。

.outer{ margin: 30px;  width: 300px; background-color:#669;padding:1px;}

效果将如图2。

然后再认真滴看下这篇博客：CSS中margin边界叠加问题及解决方案

没看懂了.....

css margin


联系
我们