`

Overlapped Margins

 
阅读更多

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 .

 

 

 

分享到：
| Padding Images With Background Image
评论
发表评论

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

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics