Сокращение свойств

Несколько свойств CSS можно записать в виде одной строки значений, которая заменяет необходимость указывать целый ряд свойств. Эти свойства описываются значениями, разделенными пробелами.

Например, вы можете объединить margin, padding и border-width и записать margin-top-width, margin-right-width, margin-bottom-width и т.п. в виде свойство: top right bottom left;

Следовательно, вместо того, чтобы указывать стиль так:

p {
	border-top-width: 1px;
	border-right-width: 5px;
	border-bottom-width: 10px;
	border-left-width: 20px;
}

Вы можете записать их так:

p {
	border-width: 1px 5px 10px 20px;
}

Вы также можете объединить border-width, border-color и border-style:

p {
	border: 1px red solid;
}

(вы можете использовать это вместе с border-top, border-right и др.)

Если вы указываете только два значения (например, margin: 1em 10em;), то первое значение — это верх и низ, а второе — лево и право.

Также можно собирать несколько свойств, которые влияют на шрифт, используя свойство font:

p {
	font: italic bold 1em/1.5 courier;
}

(где /1.5 – высота строки)

Подводя итог, рассмотрите этот код:

p {
	font: 1em/1.5 "Times New Roman", times, serif;
	padding: 3em 1em;
	border: 1px black solid;
	border-width: 1px 5px 5px 1px;
	border-color: red green blue yellow;
	margin: 1em 5em;
}

Работает отлично.