Overlapped Margins

kaqi

浏览: 228173 次
性别:
来自: 北京

最近访客更多访客>>

一个java程序员

sqllib

邱理军

weixuan

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

css
CSS Patterns

Problem:

The vertically neighbouring margins will be merged if they are not seperated by border or padding. The final margin pixels is the biggest one among them.

This is a feature of css that we sometimes need to take advantage of. But sometimes, we need to dismiss this function.

Solution:

In most cases, we need this default behavior of css. If we do need to dismiss it, we can use :after to do it.

http://www.apple.com/ uses this way to clear the margin.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <style>
        .inner {
            margin-top: 20px;
            margin-bottom: 20px;
        }

        .clearfix-wrapper:after {
            clear: both;
            content: ".";
            display: block;
            height: 0;
            visibility: hidden;
        }

        .visible-container{
            border: 1px solid;
        }

        .container_with_padding{
            padding:1px;
        }
        
        .selfclear:after {  
        clear: both;  
        content: ".";  
        display: block;  
        height: 0;  
        visibility: hidden;  
    }  
    </style>
</head>
<body>
<div>
    <div class="inner">This is the top div with a bottom margin.</div>
</div>

<div class="clearfix-wrapper">
    <div class="inner">Top margin overlap with the above div's margin. The bottom margin does not overlap because it is
        cleared.
    </div>
</div>

<div>
    <div class="inner">The top margin is not overlapped with the previous one.</div>
</div>

<div class="visible-container">
    <div class="inner">The visible border will clear the margin overlap.</div>
</div>


<div class="container_with_padding .selfclear">
    <div class="inner">Padding will clear the margin overlap.</div>
</div>
    
<div>
    <div class="inner">Cleared</div>
</div>
</body>
</html>

Try it on jsfiddle

Note:

There is no horizontally overlapped margin like the example here .

分享到：

Required red star | Padding Images With Background Image

2012-03-11 15:07
浏览 635
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论