Короткая запись свойств
Некоторые CSS-свойства имеют короткую запись, которая позволяет объединить несколько параметров в одной строке. Например, такой набор свойств:
font-family: Arial, sans-serif;
font-size: 20px;
line-height: 1.4;
font-weight: bold;можно записать в одну строку:
font: bold 20px/1.4 Arial, sans-serif;Аналогичным образом работает короткая запись отступов, такой код:
margin-top: 20px;
margin-right: auto;
margin-bottom: 35px;
margin-left: auto;превращается в такое:
margin: 20px auto 35px;Получается лаконичная запись, которую удобно и читать, и писать. Однако нужно понимать во что она разворачивается, и что получится, если в ней будут пропущены какие-нибудь свойства.
Например, каким будет фон в примере ниже? Он будет заполнен розовым цветом или картинкой с котом?
background-color: pink;
background: url('mycat.png');Правильный ответ — картинка с котом, потому что при использовании короткой записи свойства, которые не были указаны, сбрасываются к значениям по умолчанию, то есть по сути браузер увидит такое:
background: transparent url('mycat.png');Картинка с котом останется, а вот цвет пропадёт.
Если сбрасывать цвет фона не входило в ваши планы, фоновое изображение следует задать с помощью свойства background-image:
background-color: pink;
background-image: url('mycat.png');Аналогичная проблема может возникнуть с отступами и полями. Например:
margin-top: 50px;
margin: 0;Если из четырех значений указано одно, все отступы будут равны друг другу, и первая строчка окажется совершенно бесполезной:
margin: 0 0 0 0;Чтобы избежать подобных проблем, следует, во-первых, группировать свойства по смыслу, это позволит быстрее находить ошибки, а во-вторых, если вам нужно переопределить значения ранее заданных свойств, не используйте сокращённую запись.