Ширина и высота

Размер содержимого элемента задают два свойства: width и height. Например, так мы сделали бы все изображения шириной 300 пикселей и высотой 200 пикселей:

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

Единица px — это пиксель, маленькая фиксированная единица. На обычном компьютерном экране один пиксель — это одна точка экрана (на более чётких экранах, например у телефонов, на один пиксель приходится несколько точек). Для сравнения: экран телефона обычно имеет в ширину от 360 до 430 пикселей, а экран компьютера — часто от 1280 до 1920.

Когда мы не задаём ширину и высоту, браузер вычисляет их сам (их значение по умолчанию — auto): заголовок или div так же широк, как его родитель, а по высоте занимает столько, сколько нужно его содержимому. Если же мы их задаём, элемент сохраняет этот размер, даже когда содержимому нужно больше или меньше места.

Помните, что width и height задают размер только содержимого. Внутренний отступ и рамка добавляются вокруг него, как показывает картинка в предыдущем упражнении. Позже в этом уроке мы увидим, как это изменить.