Overlapped Margins

最新推荐文章于 2024-12-16 18:52:15 发布

原创最新推荐文章于 2024-12-16 18:52:15 发布 · 123 阅读

0 ·

CC 4.0 BY-SA版权

css 同时被 2 个专栏收录

23 篇文章

订阅专栏

CSS Patterns

18 篇文章

订阅专栏

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 .