如何在不推出屏幕内容的情况下添加保证金？

Question

我有一个两列布局，我想在右栏中添加一些填充\页边距而不将内容推出屏幕。在我的插图中，箭头指向我想要额外空间的位置。当我向红色div添加边距或填充时，它将红色div从屏幕向右推，我想避免这种情况。是否有推荐的方法来做到这一点？也许是包装div或什么？感谢

Answer 1

没有看到代码，我只能告诉你......

如果您不希望将内容推离屏幕，则所有元素的width - 包括margin和padding - 必须加起来不再超过100％或您想要的最大像素宽度。 （通常，当混合像素和百分比时，你可能想要更少。）

这是一个简单的例子：

<div id="left"></div>

<div id="right"></div>

#left{
    border:1px solid red;
    width:20%;
    height:50px;
    margin-right:4%;
    float:left;
}

#right{
    border:1px solid red;
    width:75%;
    height:50px;
    float:left;
}

http://jsfiddle.net/nWEnj/

Answer 2

为了解决这个问题，正如其他人指出的那样，由于box model，您需要从元素的宽度中减去填充的值。填充是计算中的因素，该计算确定用户代理中的元素大小。

CSS3添加了box-sizing属性，允许您绕过默认的框模型渲染，并指示它在元素中包含填充，完全遵循指定的宽度和高度：

/*Property without vendor prefixes*/
box-sizing:border-box;

请参阅此文章：http://www.css3.info/preview/box-sizing/

或者，来自spec本身：

  

边界框   此元素上指定的宽度和高度（以及相应的最小/最大属性）确定元素的边框。也就是说，元素上指定的任何填充或边框都布局并在此指定的宽度和高度内绘制。通过从指定的“宽度”和“高度”属性中减去相应边的边框和填充宽度来计算内容宽度和高度。由于内容宽度和高度不能为负（[CSS21]，第10.2节），因此该计算为0。

Answer 3

如果您的div的宽度为100px并且您添加了padding-right：20px，那么它的宽度将是120px，因此当您使用padding-left / right时减去填充量与宽度的关系。

Answer 4

这是你的事吗？

jsfiddle

左右div之间的空白区域可以通过右侧div的“margin-left”改变（更多的边距可以提供更多的空白区域）。