包括宽度和高度的边距 [英] Including margin for width and height

问题描述

我想要框宽度和高度默认包括所有内容，填充，边框宽度和边距。有办法做到这一点吗？特别是，我想要能够指定类似 width：100％的东西，包括到边缘的所有东西。

I want box width and height to include all of the content, padding, border width, and margin by default. Is there a way to do this? Especially, I want to be able to specify something like width: 100% including everything up to the margin.

推荐答案

这是一个模糊的问题，但我会尽全力回答。

This is a vague question, but I'll answer the best I can.

你的盒子的外面;这意味着没有办法在您的div中包含边距。

Margin, by definition, is the area around the outside of your box; meaning there's no way to include margins inside of your div.

如果您希望在框的内侧更多填充，但不想要框的大小，请使用： sizing：content-box;

或者如果要包括填充和边框，请使用： sizing：border-box;

If you would like more padding on the inside of your box, but you don't want the box to resize, then use: box-sizing:content-box;
Or if you would like to include padding and the border, use: box-sizing:border-box;

一个可维护的解决方案，保留div的大小和移除溢出将看起来像这样：

A workable solution that preserves the size of your divs and removes overflow would look something like this:

#parent{
    box-sizing:border-box;
    width:100%;
    height:200px;
    padding:2em;
}
#child{
    box-sizing:border-box;
    width:100%;
    height:100%;
    padding:1em;
}

---

---

<div id="parent">
   <div id="child"></div>
</div>

只要将要添加边框的div放入另一个带有padding的div。因此创造了人造边缘。

Just place the div you want to give margins to inside of another div that has padding. Thus creating faux margins.

这篇关于包括宽度和高度的边距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！