Size

CSS Size Summary

CSS size usually means width and height. Width controls how wide an element is. Height controls how tall an element is. Width can use a fixed value such as 300px or a percentage such as 50%.

.box {
	width: 300px;
	height: 150px;
}

Width

Width controls how much horizontal space an element takes up. A box with width: 300px; will be 300 pixels wide.

.box {
	width: 300px;
}

You can also use a percentage. A width of 50% makes the element half as wide as its parent.

.box {
	width: 50%;
}

Width is used constantly in real web layouts. It can control the size of cards, buttons, images, sidebars, wrappers, and sections.

Height

Height controls how much vertical space an element takes up. A box with height: 150px; will be 150 pixels tall.

.box {
	height: 150px;
}

Height is useful, but it should be used carefully. Text, images, and screen sizes can change. If the height is too small, the content may not fit well.

Block Elements

Block elements usually take up the full width available unless you give them a specific width. Common block elements include div, p, h1, h2, section, header, and footer.

div {
	width: 300px;
}

When a block element has a width, padding can make the visible box larger unless you use box-sizing: border-box;.

.box {
	box-sizing: border-box;
	width: 300px;
	padding: 20px;
}

With box-sizing: border-box;, the padding is included inside the size of the block. This makes the box easier to control.

Inline Elements

Inline elements sit inside a line of text. Common inline elements include span, a, strong, and em.

Inline elements do not behave like normal boxes for width and height. Setting width or height on an inline element usually does not work the way it does on a block element.

span {
	width: 300px;
	height: 100px;
}

Padding can still be added to inline elements, but it does not create a normal block-sized box. If you need width, height, and padding to behave like a regular box, use display: inline-block; or display: block;.

span {
	display: inline-block;
	width: 300px;
	padding: 20px;
}

Common Size Values

CSS sizes can use pixels, percentages, and other units. Pixels are fixed. Percentages are based on the width of the parent element.

.fixed-box {
	width: 300px;
}

.half-width-box {
	width: 50%;
}

.full-width-box {
	width: 100%;
}

A fixed width stays the same size. A percentage width can grow or shrink with its parent. A width of 50% uses half of the parent width, while 100% uses all of it.