The Box Model: Padding, Border, Margin

The Box Model: Padding, Border, Margin
Table of Contents
  1. Content
  2. Padding
  3. Border
  4. Margin
  5. Box Sizing
bluehost placeholder image

The CSS box model is a very important concept to grasp. It explains a couple of terms that this lesson will dive into more specifically, like padding, border, and margin.

Here is a nice diagram of the CSS box model:

Diagram of the CSS Box Model. Notice the content inside padding, inside border, inside margin?
Diagram of the CSS Box Model. Notice the content inside padding, inside border, inside margin?

Content

You can consider every HTML element as just a box. Inside that box, basically everything in between tags, is considered content.

	
	<span>I am content.</span>
	

Width and Height

You can give an element with content a custom width and height by using the width and height CSS properties.

Here's an example:

	
	<!DOCTYPE html>
	<html>
		<head>
			<title>Width and Height</title>
			<style>
				.content {
					background-color: pink;
					width: 20rem;
					height: 10rem
				}
			</style>
		</head>
		<body>
			<div class="content">
				This is content.
			</div>
		</body>
	</html>
	
Using width and height in CSS.
Using width and height in CSS.

The background color was added so that you can clearly see the boundaries of the newly-expanded element.

Minimum Width and Height

Give an element a minimum width and height using min-width and min-height to ensure that the element is at least a certain size.

	
	<!DOCTYPE html>
	<html>
		<head>
			<title>Min Width and Height</title>
			<style>
				.content {
					background-color: pink;
					width: 20rem;
					height: 10rem;
					min-width: 25rem;
					min-height: 15rem;
				}
			</style>
		</head>
		<body>
			<div class="content">
				This is content.
			</div>
		</body>
	</html>
	
Using minimum width and height in CSS.
Using minimum width and height in CSS.

Notice how even though we set the width and height to be 20rem and 10rem respectively, the element is still larger because the minimum values we gave to the width and height exceed those values.

Maximum Width and Height

Setting the maximum width and height of an element is just as easy as setting the minimum. Use max-width and max-height and give it a value.

	
	<!DOCTYPE html>
    <html>
        <head>
            <title>Max Width and Height</title>
			<style>
				.content {
					background-color: pink;
					width: 20rem;
					height: 10rem;
					max-width: 15rem;
					max-height: 5rem;
				}
			</style>
        </head>
        <body>
			<div class="content">
				This is content.
			</div>
        </body>
    </html>
	
Using maximum width and height in CSS.
Using maximum width and height in CSS.

As you would expect, the element does not get larger than the specified maximum, even if another CSS rule sets it higher.

Padding

Padding is space added between the content and the border of its own box. You can declare it using the padding property, and giving it a length.

Here's an example:

	
	<!DOCTYPE html>
	<html>
		<head>
			<title>Padding</title>
			<style>
				div {
					background-color: lightblue;
				}
				.no-padding {
					padding: 0;
				}
				.some-padding {
					padding: 2rem;
				}
			</style>
		</head>
		<body>
			<div class="no-padding">I have no padding</div>
			<br>
			<div class="some-padding">I have some padding</div>
		</body>
	</html>
	
Example of padding.
Example of padding.

As the image shows, the element that got some padding appears larger than the element that got zero padding. The blue background helps to illustrate where the element's borders are.

You can also set padding on each side individually, by using padding-top, padding-right, padding-bottom, or padding-left.

udemy2 placeholder image

Border

At the edge of the content plus the padding you defined is the start of the element's border. By default, an element will not have a border, but you can define one with the border property.

The syntax for it is the width or thickness of the border, the style, and then the color. For example, if you wanted a blue, dashed, 2 pixels thick border, it would look like this:

	
	<!DOCTYPE html>
	<html>
		<head>
			<title>Border</title>
			<style>
				.blue-border {
					border: 2px dashed blue;
					padding: 1rem;
				}
			</style>
		</head>
		<body>
			<div class="blue-border">Sweet border!</div>
		</body>
	</html>
	
Example of a border.
Example of a border.

Here are other border styles you can use:

  • solid
  • dotted
  • dashed
  • double
  • inset
  • outset
  • groove
  • ridge

Border Radius

Since we're on borders, it's a perfect time to slip in a pretty cool property. You can round off the borders of your element using border-radius, like this:

	
	<!DOCTYPE html>
	<html>
		<head>
			<title>Border Radius</title>
			<style>
				.rounded-corners {
					border: 0.5rem solid purple;
					padding: 1rem;
					border-radius: 1rem;
				}
			</style>
		</head>
		<body>
			<div class="rounded-corners">Rounded corners!</div>
		</body>
	</html>
	
Example of a border radius.
Example of a border radius.

The value for this property is any length of your choosing.

Box Shadow

This is another cool property somewhat related to boxes, and that is adding a shadow to them using box-shadow.

For the most common uses of this property, it takes five values, the horizontal offset, the vertical offset, the blur radius, the size of the shadow and finally, the color.

	
	<!DOCTYPE html>
	<html>
		<head>
			<title>Box Shadow</title>
			<style>
				.box-shadow {
					background-color: lightpink;
					border: 0.25rem solid red;
					padding: 1rem;
					margin: 2rem;
					box-shadow: 0.5rem 0.5rem 0.25rem darkgray;
				}
			</style>
		</head>
		<body>
			<div class="box-shadow">Box shadow!</div>
		</body>
	</html>
	
Example of a box shadow.
Example of a box shadow.

Margin

The last major piece to understanding the CSS box model is margin. Unlike padding, which was spacing inside the element's border, margin is spacing outside the element's border, and you declare it using margin.

	
	<!DOCTYPE html>
	<html>
		<head>
			<title>Margin</title>
			<style>
				span {
					background-color: green;
					padding: 0.5rem;
					border-radius: 0.25rem;
					display: inline-block;
				}
				.low-space {
					margin-left: 1rem;
				}
				.med-space {
					margin-left: 5rem;
				}
				.high-space {
					margin-left: 10rem;
				}
			</style>
		</head>
		<body>
			<span class="low-space">A</span>
			<span class="med-space">B</span>
			<span class="high-space">C</span>
		</body>
	</html>
	
Example of margin.
Example of margin.

While a difficult concept to illustrate, it should be clear to see that the more margin on the left side of the element, the further away it goes, despite the fact that all the elements have the same amount of padding.

This is because, again, padding affects only inside the element's border while margin affects what is outside it.

Box Sizing

The box-sizing property exists to allow you to control how an element's width and height is calculated. It only has two values so this one is pretty simple to demonstration.

The first value is content-box. Luckily for you, this is actually the default value. This value makes it so that the width and height is only determined by the content itself. Any padding or border is extra and makes the element bigger.

The second value is border-box. This does the opposite effect. All additional padding and border are now included in the width and height. This means that if you constrain an element to a specific size, any added padding and border will simply make the remaining content space smaller to maintain that overall total size.

Let's look at a simple example of the same box with two different sizes because of different box-sizing values. For this markup:

	
	<div class="box content-box"></div>
	<div class="box border-box"></div>
	

We apply these styles:

	
	.box {
		width: 5rem;
		height: 5rem;
		border-width: 1rem;
		padding: 3rem;
	}
	.content-box {
		box-sizing: content-box;
		background-color: red;
	}
	.border-box {
		box-sizing: border-box;
		background-color: blue;
	}
	

And the results are clear:

Example of the differnce in box sizing.
Example of the differnce in box sizing.

Simply put, because the red square applies the padding and border on top of it's normal width and height, it appears way bigger than the blue square who keeps itself at 5rem for its width and height no matter what.

That's all for the CSS box model!