(click anywhere to close)
OPEN MENU

[CSS3] Margin, Padding & Dimensions

category: Website | course: CSS3 | difficulty:

By default, every element scales to fit all the content that is inside. This means that if you type a really long sentence, the element would become wider than the screen and you would have to scroll to read it all. This also means that if you type something really short, you get a nice clean box around it with perfect dimensions. Webpages, however, are not made to extend in width but in height. We read from top to bottom, so it’s only logical that you have to scroll down to read further on large webpages. Therefore, if you set or restrict the width of an element, text that reaches the end of the line will automatically continue on the next line below – like we’re used to. Nice!

Setting width and height

As expected, we use the width and height properties for this. These can take any number as value.

.someBox {
	width:500px;
	height:100%;
}

Restricting width and height

If we want our webpage to be responsive, i.e. scale with different viewport sizes, a fixed size for each element isn’t going to help us. It’s therefore common practice to set the size of an element in percentages, and then restrict it to make sure it doesn’t get too small or large.

The max-width and max-height properties set a maximum, while min-width and min-height properties set the minimum. Again, you can provide a number as value.

.someBox {
	max-width:100%;
	max-height:100%;
	min-width:500px;
	min-height:500px;
}
/* Box scales with the page and content, but stays within 500px - 100% bounds*/

Padding

Padding refers to the white space between the content of a box and its border. There are four sides for which we can set this: left, top, right, bottom.

To set a value for these individually, we use padding-left, padding-top, padding-right, and padding-bottom after each other.

But, we can also take a shortcut. The padding property can take one to four arguments:

Declaration

Explanation

padding: a b c d;

Sets top, right, bottom and left side to a, b, c, d respectively

padding: a b c;

Sets top to a, right and left to b, and bottom to c

padding: a b;

Sets top and bottom to a, right and left to b

padding: a;

Sets all sides to a

 

It’s okay though not to use these shortcuts until you are comfortable with setting them individually.

.someBox {
	padding:20px;
}
/* Content of the box has 20px white space all around it */

Margin

Margin refers to the white space between the border of a box and the outside world (“the other boxes”).

Again, we can set the same four sides with margin-left, margin-top, margin-right, and margin-bottom.

There’s also the margin shortcut that can take one to four arguments in exactly the same way as padding. Margin and padding are practically the same concept, it’s just that one is on the inside of the box, and the order at the outside.

.someBox {
	margin:20px;
}
/* The whole box has 20px white space all around it */

Box Sizing

Now, there’s one small obstacle. When we set a width or height for an element, it does not take into account the padding, border and margin. For example, if we set an element to a width of 100 pixels, and then add a padding of 10 pixels, the resulting element on screen will take up 110 pixels.

If we want the browser to take padding and border into account, we need to set the box-sizing property. The default value is content-box, but we want it to be border-box.

.someBox {
	box-sizing:border-box;
}

Why doesn’t it take margin into account? Because margin isn’t important for an element’s size – it’s mainly for positioning purposes (to offset it or give it some breathing space). Other elements can sit within the margin, and you won’t notice because they can’t collide with the content within the box.

CONTINUE WITH THIS COURSE
Test your knowledge with the quiz!
What happens when you use the min-width property?
A
You set the minimum width of an element
B
You adjust the padding on the right side of an element
C
You set the minimum height of an element
Do you like my tutorials?
To keep this site running, donate some motivational food!
Crisps
(€2.00)
Chocolate Milk
(€3.50)
Pizza
(€5.00)