CSS Margin计算 [英] CSS Margin calculation

问题描述

虽然我理解整个CSS盒子模型在理论上像填充，边框，边缘，我的理解是局限于这个单独的部分。

While i do understand the overall CSS box model in theory like padding, border, margin, my understanding is restricted to this individual parts.

我经常困惑这实际上是由浏览器呈现的。例如。像填充是在边框内，但如何计算保证金？
它是在框边框还是相对于屏幕？
如果我们给出左边距和右边距，什么更高的优先级？
如果有一个宽度以及左/右边距，实际渲染如何发生像是首先做的框的宽度，然后填充或什么是什么？

I often gets confused how this is actually rendered by the browser. E.g. Like padding is within the border, but how is margin calculated? Is it wrt the box border or with respect to the screen? If we give both left and right margins, what takes higher precedence? If there is a width as well as left/right margins, how does the actual rendering take place like is the width of box made first,then the padding or what is it like?

使用margin make将此属性添加到此框中会有什么区别？

What difference does a float attribute added to this box with margin make?

推荐答案

4个尺寸：外到内：

1. 边距 - 这是父元素的空间，与父元素的边距叠加。


2. Border - 这是边框的宽度，可以用 border：或 border-width：


3. 填充 - 这是框内的空间，如果框内的任何内容/元素将与其侧边隔开。实际框的宽度可以根据内容，100％或 width：或 max-width：



1. Margin - that's the space from the parent, it stacks with the parent's padding.
2. Border - that's the border's width, it can be specified with border: or border-width:
3. Padding - that's the space inside the box, if any content/elements inside that box will be spaced that from its sides.
4. Width - the actual box's width, may change according to content, 100%, or a fixed width as specified in width: or max-width:

图片说明：

An image for illustration:

浮动的元素会考虑保证金，所以如果你有

A floated element takes margin into account, so if you have

#element { margin-left: 100px; float: left; }

它会左移，但左边有一个100px的边距。

it will float left, but will have a 100px margin from the left side.

这篇关于CSS Margin计算的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！