Width and Height

The size of an element's content is set with two properties: width and height. For example, this is how we'd make all images 300 pixels wide and 200 pixels tall:

img {
	width: 300px;
	height: 200px;
}

The unit px is a pixel, a small fixed unit. On an ordinary computer screen, one pixel is one dot of the screen (sharper screens, such as those of phones, use several dots for one pixel). For comparison, a phone screen is usually about 360 to 430 pixels wide, and a computer screen often 1280 to 1920 pixels.

When we don't set the width and height, the browser works them out itself (their default value is auto): a heading or a div is as wide as its parent and as tall as its content needs. When we set them, the element keeps that size even if its content needs more or less space.

Remember that width and height set the size of the content only. The padding and the border are added around it, as the picture in the previous exercise shows. Later in this lesson, we'll see how to change that.