Question

<div id='wrapt'>
<img id='logoc' src='https://upload.wikimedia.org/wikipedia/commons/c/c7/Porto_Covo_pano_April_2009-4.jpg' alt='img'>
</div>

#wrapt{
    margin-top:45px;
    position:relative;
    background:#000;
    border-bottom:2px solid red;
    border-top:2px solid red;
}
#logoc{
    display:block;
    width:50%;
    margin:25px auto;
}

如果我从#wrapt移除边框（2px纯红色） - #logoc会丢失其边距！
那么，如何保持父母的边界没有边界呢？

这个qustion与this不重复这与父母/子女的边距/填充无关我的问题是：

为什么孩子的边缘会影响父母的边界？

JSFIDDLE

Answer 1

$('#testAnimation').on('click', function (event) {
    var $animationTarget = $('#animationTarget'),
        opacity = $animationTarget.css('opacity') == 0 ? 1 : 0;     
    $animationTarget.animate({opacity: opacity}, 'slow');
});

使用#wrapt{ margin-top:45px; position:relative; background:#000; text-align:center; } #logoc{ display:inline-block; width:50%; margin:25px auto; }和inline block对齐方式可行，center符合上下边距。

Answer 2

在 #logoc 类中添加填充，并从 #wrapt 类中删除边框

#logoc {
    display: block;
    width: 50%;
    margin: 25px auto;
    padding: 10px;
}

Answer 3

你可以通过浮动这两个元素并向两个元素添加实际宽度来实现：

    #wrapt{
        margin-top:45px;
        position:relative;
        background:#000;
        float:left;
        width:100%;
    }
    #logoc{
        display:block;
        float:left;
        width:50%;
        margin:25px 25%;
    }

如果父母没有边界，孩子就会失去边际

3 个答案: