Некоторые свойства CSS допускают использование строки значений, что устраняет необходимость в некоторых индивидуальных свойствах. Строка значений представляет собой набор определенных значений, разделенных пробелами.
Например, свойства margin, padding позволяют объединять соответствующие индивидуальные свойства, такие как margin-top-width, margin-right-width, margin-bottom-width и т.д., в форме свойство: верхнее правое нижнее левое;
Таким образом, HTML селектор вот с такой декларацией:
p {
margin-top: 1px;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 20px;
}
Можно объединить следующим образом
p {
margin: 1px 5px 10px 20px;
}
Свойства border-width, border-color и border-style также могут быть объединены в единое свойство border, например:
p {
border: 1px red solid;
}
(Также эти правила применимы и к свойствам border-top, boder-right, border-bottom, border-left.)
Если определяется два значения (например, margin: 1em, 10em;), то первое значение будет применяться к верхней и нижней стороне элемента, а второе – к правой и левой.
Свойства, относящиеся к шрифтам, также можно объединять в свойстве font:
p {
font: italic bold 1em/1.5 courier;
}
(Здесь "/1.5" относится к свойству line-height)
Итак, сведем все в одну декларацию. Чтобы окончательно во все разобраться, поэкспериментируйте со следующим кодом:
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;
}