Question

我有一个带有嵌套h2元素的横幅div。当我向div添加边框时，它似乎会增长。但没有内容添加到div。我有点困惑。这是场景：

<body>
<div id="easel">
    <div class="banner">
        <h2>One Column Layout</h2>
    </div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum totam quidem, corporis veniam excepturi quasi dignissimos dolores repellat voluptatibus nulla quas, qui magnam debitis accusantium quo, explicabo doloremque iste! Quae voluptatum architecto nostrum soluta, nam ipsam repudiandae temporibus vel debitis libero, amet ducimus? Illo voluptatibus eligendi esse nam sit repudiandae.
</div>

body {
        margin-left: 15%;
        margin-right: 15%;

    }

    #easel{
        background-color: #555;
        width:600px;
        margin: 0 auto;     
        border: 1px solid black;
    }

    .banner{
        background-color: #557;
        /* border: 1px solid green; */

    }

这提供以下内容： enter image description here

现在添加绿色边框（上面已注释掉），.banner div的背景似乎会增加：

enter image description here

我怀疑这与添加用户代理有关 -webkit-margin-before值为h2，但不完全了解发生了什么。

Answer 1

<强>边界框
此元素的宽度和高度（以及相应的最小/最大属性）的长度和百分比值确定元素的边框。也就是说，元素上指定的任何填充或边框都布局并在此指定的宽度和高度内绘制。通过从指定的宽度和高度属性中减去相应边的边框和填充宽度来计算内容宽度和高度。 http://www.w3.org/TR/2015/WD-css3-ui-20150519/#valdef-box-sizing-border-box

您需要将box-sizing: border-box应用于元素

#easel, .banner {
    box-sizing: border-box;
}

Answer 2

某些HTML标签（如标题，正文等）正在采用默认保证金＆amp;填充取决于浏览器。因此，您可以使用此代码来避免此问题。

$articles = $this->Articles->find('all')
        ->select(['fields_you_want_from_Articles'])
        ->contain(['Comments'  => function($q) {
            return $q
                ->select(['fields_you_want_from_Comments']);
        }]);

Answer 3

这必须是因为h2元素的默认边距。检查元素的默认边距，然后相应地分配，然后它将显示为您指定的值。如果您不希望横幅div通过边框的思考扩展，box-sizing属性也会有用

添加边框时div背景会增长

3 个答案: