css边距和定位布局
This article was peer reviewed by Dave Maxwell, Adrian Sandu, and Panayiotis Velisarakos. Thanks to all of SitePoint’s peer reviewers for making SitePoint content the best it can be!
本文由Dave Maxwell ， Adrian Sandu和Panayiotis Velisarakos进行了同行评审。 感谢所有SitePoint的同行评审人员使SitePoint内容达到最佳状态！
When I was just starting to learn CSS, the margin and padding properties always confused me. They seemed very similar and in some cases appeared to produce the same result.
当我刚开始学习CSS时，margin和padding属性总是让我感到困惑。 它们似乎非常相似，在某些情况下似乎产生相同的结果。
In this tutorial, you will learn the difference between CSS margins and padding and how these properties affect the space between elements on a webpage. We will also discuss margin collapsing, the effect of using different units while creating responsive websites, and conclude with some layout tricks you can do with CSS margins and padding.
在本教程中，您将学习CSS边距和填充之间的区别，以及这些属性如何影响网页上元素之间的空间。 我们还将讨论页边距折叠，在创建响应式网站时使用不同单位的效果，并总结一些可用于CSS页边距和填充的布局技巧。
Elements in CSS are represented as a rectangular box. The size of this rectangular box is determined by the element’s:
CSS中的元素表示为一个矩形框 。 此矩形框的大小由元素的尺寸决定：
Content 内容 Padding 填充 Border 边境 Margin 保证金The content area of an element lies in the middle of the element. The padding surrounds the element’s content . The borders in turn surround the padding. The margin of the element is its external layer, i.e., it lies outside the element.
元素的内容区域位于元素的中间 。 填充围绕元素的内容 。 边框依次包围填充 。 元素的边缘是元素的外层 ，即位于元素外部。
The following diagram should make the arrangement clearer.
下图应使布置更清晰。
As apparent from the diagram, the padding of an element is the layer that extends from the outer edge of the element’s content to the inner edge of its border. This property is used to control the spacing between the element’s border and its main content. The padding applied on an element affects its size on the webpage. It does not affect the distance between different elements on a webpage.
从该图可以明显看出，元素的填充是从元素内容的外边缘延伸到其边框的内边缘的层 。 此属性用于控制元素边框与其主要内容之间的间距。 应用于元素的填充 会影响其在网页上的大小 。 它不会影响网页上不同元素之间的距离 。
When you want to increase or decrease the amount of space in-between elements, you should use the margin property. The margin applied on an element won’t have any effect on its size.
当您想要增加或减少元素之间的空间时 ，应使用margin属性 。 应用于元素的边距不会对其大小产生任何影响。
One important thing related to boxes that you should keep in mind is that the sizes of all the boxes on a webpage depends on the box model being used. There are two different box models:
与框有关的重要一件事，您要记住的是， 网页上所有框的大小取决于所使用的框模型 。 有两种不同的盒子型号：
W3C box model W3C盒子模型 Traditional box model 传统箱型See the Pen Choosing a Box Model by SitePoint (@SitePoint) on CodePen.
见笔选择一个盒模型由SitePoint( @SitePoint上) CodePen 。
The W3C box model considers the width of the element to be equal to the content of the box excluding its padding and border. Padding and border are added on top of whatever dimensions you set for the element, which could have some unpredictable consequences on your page layout.
W3C盒子模型认为元素的宽度等于盒子的内容( 不包括填充和边框)。 在为元素设置的任何尺寸上都添加了填充和边框，这可能会对页面布局产生一些无法预料的结果。
For example, let’s consider a box with a width of 200px and a height of 200px, padding of 10px on all sides and a border of 2px all round. The browser does not see it simply as a 200px box. Rather, the browser calculates the horizontal space necessary to display the box as being 224px: 200 (width) + 2 (left border) + 10 (left padding) + 10 (right padding) + 2 (right border) = 224px. Given that the element is a perfect square, the height will also compute to 224px.
例如，让我们考虑一个宽度为200像素，高度为200像素，边框各为10像素，边框为2像素的框。 浏览器不能仅将其视为200px的框。 而是，浏览器计算将框显示为224px所需的水平空间：200(宽度)+ 2(左边框)+ 10(左边框)+ 10(右边框)+ 2(右边框)= 224px。 假设元素是一个完美的正方形，则高度也将计算为224px。
On the other hand, the traditional box model considers the width of the element to be equal to the sum of the content, padding and the border applied to the box. On the layout front, this means that, if your box is 200px wide, the browser computes the horizontal space it needs to display the box as being 200px wide, including padding and border. This yields more predictable results and it’s easier to work with.
另一方面， 传统的盒子模型认为元素的宽度等于内容，填充和应用于盒子的边框之和。 在布局方面，这意味着，如果您的框为200px宽，浏览器将计算显示框为200px宽所需的水平空间，包括填充和边框。 这样可以产生更可预测的结果，并且更易于使用。
All browsers use the W3C box model by default. You can choose to specify the box model explicitly by setting the value of the box-sizing property to either content-box (W3C box model) or border-box (traditional box model). The traditional box model, being more intuitive, is the most popular approach among web developers.
默认情况下，所有浏览器都使用W3C盒式模型。 您可以通过将box-sizing属性的值设置为content-box (W3C盒子模型)或border-box (传统盒子模型)来明确指定盒子模型。 传统的盒子模型更加直观，是Web开发人员中最受欢迎的方法。
Here is how you can set the box-sizing property to follow the traditional box model on your web project:
您可以通过以下方法将box-sizing属性设置为遵循Web项目中的传统box模型：
html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; }If you learn best by doing, try experimenting with this fun interactive demo by Guy Routledge.
如果您边做边学得最好，请尝试用Guy Routledge的这个有趣的交互式演示进行试验。
You can control the padding applied to the four sides of an element using the padding-top, padding-right, padding-bottom and padding-left properties. You can also specify the padding using the shorthand padding property.
您可以使用padding-top ， padding-right ， padding-bottom和padding-left属性来控制应用于元素四个侧面的padding-left 。 您还可以使用简写padding属性指定填充 。
When a single padding value is present, CSS uses this value to determine the padding of all four sides:
当存在单个填充值时，CSS使用此值来确定所有四个边的填充：
/* all four sides */ padding: 10px;When two values are present, the first value determines the top and bottom padding and the second value determines the left and right padding:
当存在两个值时，第一个值确定顶部和底部填充，第二个值确定左侧和右侧填充：
/* vertical | horizontal */ padding: 2em 4em;When three values are present, the first value determines the top padding, the second value determines the left and right padding and the third value determines the bottom padding:
如果存在三个值，则第一个值确定顶部填充，第二个值确定左侧和右侧填充，第三个值确定底部填充：
/* top | horizontal | bottom */ padding: 1em 20px 2em;When all four values are present, they set the top, right, bottom and left padding in this exact order:
当所有四个值都存在时，它们将按照以下精确顺序设置顶部，右侧，底部和左侧的填充：
/* top | right | bottom | left */ padding: 10px 10% 2em 15%;In the following demo, the orange background represents the content area of different elements and the white area between the borders and the content area represents the padding that we applied on each element:
在下面的演示中，橙色背景代表不同元素的内容区域，边框之间的白色区域和内容区域代表我们在每个元素上应用的填充：
See the Pen Setting Paddings by SitePoint (@SitePoint) on CodePen.
请参阅CodePen上的SitePoint ( @SitePoint )的笔设置 填充 。
Just like with padding, you can control the margin applied to the four sides of an element using the margin-top, margin-right, margin-bottom and margin-left properties. You can also specify the margin for all the four sides of an element using the shorthand margin property.
就像填充一样，您可以使用margin-top ， margin-right ， margin-bottom和margin-left属性控制应用于元素四个边的margin-left 。 您还可以使用简写margin属性为元素的所有四个边指定空白 。
/* all four sides */ margin: 10px; /* vertical | horizontal */ margin: 2em 4em; /* top | horizontal | bottom */ margin: 2em auto 2em; /* top | right | bottom | left */ margin: 10px 10% 2em 15%;When applying margins and padding, you should avoid using absolute units . This is because these units won’t adapt to the changes in font size or screen width.
应用边距和填充时，应避免使用绝对单位。 这是因为这些单位无法适应字体大小或屏幕宽度的变化。
Let’s say you have set the width of an element to 50% and also applied a margin of 15px on it. At 1200px, its width would be 600px and its margin would be 15px. At 769px, its width would be 384px and its margin would still be 15px.
假设您已将元素的宽度设置为50％，并在其上应用了15px的边距。 在1200像素时，其宽度为600像素，边距为15像素。 769px时，其宽度为384px，边距仍为15px。
In this case, the width of the element has changed by 36% but its margin still has the same old value. In most cases, this might not be a big deal. However, setting the element’s margin in terms of percentages will allow you to have finer control over the layout of the webpage on all screen sizes. This way you can make everything proportional without any sudden jumps in the value of applied margins and padding.
在这种情况下，元素的宽度已更改了36％，但其边距仍然具有相同的旧值。 在大多数情况下，这可能并不重要。 但是，以百分比形式设置元素的边距将使您可以更好地控制所有屏幕尺寸上的网页布局。 这样，您可以使所有内容成比例，而不会突然使所应用的边距和填充值突然跳升。
See the Pen Setting Margins as Percentage by SitePoint (@SitePoint) on CodePen.
请参见CodePen上的SitePoint ( @SitePoint ) 按百分比设置的笔设置边距 。
Similarly, you may want to add padding to text elements on a webpage. Generally, you would like the padding to be proportional to the font size of the corresponding element. This cannot be achieved with absolute units. However, if the padding is specified in terms of em units, it will automatically scale with the font size. Here is a demo that shows this scaling in action.
同样，您可能希望向网页上的文本元素添加填充 。 通常，您希望填充与相应元素的字体大小成比例。 用绝对单位不能实现这一点。 但是，如果以em单位指定填充，它将自动根据字体大小缩放。 这是演示此缩放比例的演示。
See the Pen Right Units for Margins and Padding by SitePoint (@SitePoint) on CodePen.
请参阅CodePen上的SitePoint ( @SitePoint )的边距和填充笔右边的单位 。
Browsers compute the final margin and padding values for an element differently based on the unit being used.
浏览器根据所使用的单位不同地计算元素的最终边距和填充值。
Any margin or padding that has been specified as a percentage is calculated based on the width of the containing element. This means that padding of 5% will be equal to 5px when the parent element is 100px wide and it will be equal to 50px when the parent element is 1000px wide. Remember that the top and bottom values are also calculated based on the width of the parent element.
已指定为百分比的任何边距或填充都是根据包含元素的宽度计算的 。 这意味着，当父元素为100px宽时，5％的填充将等于5px，而当父元素为1000px宽时，其填充将等于50px。 请记住， 顶部和底部值也是基于父元素的宽度计算的 。
In case of em units, the computed value for margin and padding is based on the font size of the element. In the previous CodePen demo, the padding applied to the bottom three text elements is 1em. However, the computed value of padding is different in each case because of the different font size.
在em单位的情况下，margin和padding的计算值基于元素的字体大小 。 在以前的CodePen演示中，应用于底部三个文本元素的填充为1em 。 但是，由于字体大小不同，每种情况下填充的计算值也不同。
There are also four different viewport based units called vw, vh, vmin and vmax. The computed value of margin and padding in this case is based on the viewport. For example, a padding of 5vw will be equal to 25px when the viewport is 500px wide and a padding of 10vw will be equal to 50px for the same viewport width. You can read more about these units in CSS Viewport Units: A Quick Start on SitePoint.
还有四个基于视口的不同单位，分别称为vw ， vh ， vmin和vmax 。 在这种情况下，页边距和填充的计算值基于视口 。 例如，当视口为500px宽时， 5vw的填充将等于25px，对于相同视口宽度， 10vw的填充将等于50px。 您可以在CSS视口单元： SitePoint 快速入门中阅读有关这些单元的更多信息。
As a beginner, knowing how these different units work can help you quickly figure out why the padding or margin of HTML elements is changing based on the parent element’s size, font size or even the viewport, which gives you the power to take control of your layout.
初学者，了解这些不同的单元如何工作可以帮助您快速了解为什么HTML元素的填充或边距会根据父元素的大小，字体大小甚至视口而变化，这使您可以控制自己的布局。
Another concept that you should be aware of is collapsing margins. In certain situations, the top and bottom margins on two elements can collapse into one. This phenomenon is called margin collapsing.
您应该注意的另一个概念是利润下降。 在某些情况下，两个元素的顶部和底部边距可能会合而为一。 这种现象称为边缘塌陷 。
Let’s say you have two elements side by side, i.e., adjacent siblings. If the margin-bottom property on the first element is set to 40px and the margin-top property on the second element is set to 25px, the final margin between the two elements will not be 65px. Its actual value will be equal to the value of the bigger margin i.e., 40px.
假设您有两个并排的元素，即相邻的兄弟姐妹。 如果第一个元素的margin-bottom属性设置为40px，第二个元素的margin-top属性设置为25px，则两个元素之间的最终边距将不会为65px。 其实际值将等于较大边距的值，即40px。
See the Pen Collapsing Margins – Adjacent Siblings by SitePoint (@SitePoint) on CodePen.
请参见CodePen上的SitePoint ( @SitePoint )的笔折叠边距–相邻兄弟姐妹 。
Similarly, margins can also collapse between a parent element and its first/last child. This happens when there is no border, padding or inline content to separate the child’s and parent’s respective margins. In this case, if there is no padding or border on the parent element, the child’s margin would look as if it were bleeding out of the parent.
同样，页边距也可能在父元素与其第一个/最后一个子元素之间崩溃。 当没有边框，填充或内联内容来分隔孩子和父母各自的边距时，就会发生这种情况。 在这种情况下，如果父元素没有填充或边框，孩子的利润率看起来就好像它是母体出血了。
One way to avoid this situation is to add a barrier between the parent’s margin and the child’s. This can be done by either using a border or a padding. The following demo shows how adding a border or padding on the parent element can avoid the bleeding margin.
避免这种情况的一种方法是在父母的边际和孩子的边际之间增加一个障碍。 这可以通过使用边框或填充来完成。 以下演示演示了如何在父元素上添加边框或填充来避免流血边距。
See the Pen Collapsing Margins – Parent and First Child by SitePoint (@SitePoint) on CodePen.
请参阅CodePen上的SitePoint ( @SitePoint )的笔折叠边距-父母和第一个孩子 。
In case of negative margins, the final value of the collapsed margins is the sum of the largest positive margin and the smallest negative margin.
在负边距的情况下，崩溃边距的最终值是最大正边距和最小负边距之和。
You can read more on this topic in Collapsing Margins, by Adam Roberts.
您可以在Adam Roberts的《 崩溃的边缘》中阅读有关此主题的更多信息。
Sometimes, you can use CSS margin and padding properties to solve a number of layout related issues. Here are a few examples:
有时，您可以使用CSS边距和填充属性来解决许多与布局有关的问题。 这里有一些例子：
Centering block-level elements horizontally inside their parent is very easy with the help of the margin property. All you have to do is set the value of the margin-left and margin-right properties of the element to auto.
借助margin属性，非常容易将块级元素在其父对象中水平居中。 您所要做的就是将元素的margin-left和margin-right属性的值设置为auto 。
.child { margin: 10px auto; }In the following demo, you can see three instances of a parent element: the first one is set to be a block-level element, the second one to be an inline-block element, and the third one is a block-level element that has been floated to the right. The child element results to be centered horizontally in all cases.
在下面的演示中，您可以看到父元素的三个实例：第一个实例设置为块级元素，第二个实例设置为内联块元素，第三个实例为块级元素，已浮动到右侧。 在所有情况下，子元素的结果都将水平居中。
See the Pen Centering Elements within Their Parents by SitePoint (@SitePoint) on CodePen.
见笔及其家长中的定心元件由SitePoint( @SitePoint )上CodePen 。
Often, the images on a webpage do not have a fixed aspect ratio. If you have to show all images with the same aspect ratio, CSS padding can help.
通常，网页上的图像没有固定的宽高比 。 如果必须以相同的长宽比显示所有图像，则CSS填充会有所帮助。
The trick is to set the height of the parent element to zero and its padding-top property to be equal to the value of the desired aspect ratio expressed as a percentage.
诀窍是将父元素的height设置为零，并将其padding-top属性设置为等于以百分比表示的所需长宽比的值。
For example, an aspect ratio of 16:9 can be achieved by using padding: 56.25% 0 0 0. Here, the value 56.25 was obtained after calculating (9/16)*100. The same method can be used to calculate the percentage of padding for any other aspect ratio.
例如，通过使用padding: 56.25% 0 0 0可以实现16：9的宽高比padding: 56.25% 0 0 0 。 这里，在计算(9/16)*100之后获得值56.25。 可以使用相同的方法来计算任何其他长宽比的填充百分比。
See the Pen Maintaining Image Aspect Ratio by SitePoint (@SitePoint) on CodePen.
见笔维护图像纵横比由SitePoint( @SitePoint上) CodePen 。
You can read more about this technique on How to Maintain Image Aspect Ratios in Responsive Web Design, by Craig Buckler.
您可以在 Craig Buckler的“ 如何在响应式Web设计中保持图像长宽比”上阅读有关此技术的更多信息。
Other interesting, although a bit more advanced uses of margins and padding, include creating full-width containers inside limited width parents and adding consistent spacing at the bottom of different modules in a webpage. You can consider these to be your next steps in mastering CSS margins and padding.
有趣的是，尽管对页边距和填充进行了更高级的使用，但还包括在有限宽度的父级内部创建全宽容器 ， 并在网页中不同模块的底部添加一致的间距 。 您可以将这些视为掌握CSS边距和填充的下一步。
If you are new to CSS, I hope this tutorial has helped you understand the differences between margins and padding. You should also be comfortable setting margins and padding with the shorthand syntax and appropriate units. In the last section, I mentioned a few interesting layout-related uses of these properties and pointed you to further resources to find out more.
如果您不熟悉CSS，希望本教程可以帮助您了解边距和填充之间的区别。 您还应该习惯使用速记语法和适当的单位设置边距和填充。 在上一节中，我提到了这些属性与布局有关的一些有趣用法，并指出了更多资源，以查找更多信息。
If you know any other tips about CSS margins and padding, please share them with us in the comments.
如果您知道有关CSS边距和填充的其他提示，请在评论中与我们分享 。
Take your CSS skills to the next level with our book CSS Master, 2nd Edition by Tiffany B. Brown – covering CSS animations, transitions, transformations and much more.
蒂芙尼·布朗(Tiffany B. Brown)出版的第二版CSS Master，将您CSS技能提升到一个新的水平–涵盖CSS动画，过渡，转换等等。
翻译自: https://www.sitepoint.com/set-css-margins-padding-cool-layout-tricks/
css边距和定位布局
相关资源：jdk-8u281-windows-x64.exe