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 : 1 em 20 px 2 em 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 : 2 em 4 em When a single padding value is present, CSS uses this value to determine the padding of all four sides: /* all four sides */ padding : 10 px You can also specify the padding using the shorthand padding property. 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. If you learn best by doing, try experimenting with this fun interactive demo by Guy Routledge.
Here is how you can set the box-sizing property to follow the traditional box model on your web project: html The traditional box model, being more intuitive, is the most popular approach among web developers. 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). This yields more predictable results and it’s easier to work with.Īll browsers use the W3C box model by default. 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. 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. Given that the element is a perfect square, the height will also compute to 224px. 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. The browser does not see it simply as a 200px box. 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.įor 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 W3C box model considers the width of the element to be equal to the content of the box excluding its padding and border. See the Pen Choosing a Box Model by SitePoint ( on CodePen. 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. The margin applied on an element won’t have any effect on its size. When you want to increase or decrease the amount of space in-between elements, you should use the margin property. It does not affect the distance between different elements on a webpage. The padding applied on an element affects its size on the webpage. This property is used to control the spacing between the element’s border and its main content. The following diagram should make the arrangement clearer.Īs 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. The margin of the element is its external layer, i.e., it lies outside the element. The borders in turn surround the padding.
The padding surrounds the element’s content. The content area of an element lies in the middle of the element. The size of this rectangular box is determined by the element’s: The Box ModelĮlements in CSS are represented as a rectangular box. 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. 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. They seemed very similar and in some cases appeared to produce the same result. When I was just starting to learn CSS, the margin and padding properties always confused me. Thanks to all of SitePoint’s peer reviewers for making SitePoint content the best it can be! This article was peer reviewed by Dave Maxwell, Adrian Sandu, and Panayiotis Velisarakos.