[БЕЗ_ЗВУКА] В этом
видео мы поговорим о значениях CSS свойств: margin, padding и border.
Вы, наверное, уже заметили по предыдущим лекциям,
что я не пользуюсь заданием margin с каждой конкретной стороны,
а задаю их так называемым универсальным свойством сразу же для всех сторон.
Многие начинающие верстальщики путаются,
в какой последовательности нужно в универсальном свойстве задавать значения.
Не случайно на слайде я здесь привожу вам часы.
Это хорошая иллюстрация для того, как легко запомнить эту последовательность.
День начинается с 12 часов,
поэтому первое значение у нас задает сверху, margin top, например.
Следующая, если идти по часовой стрелке,
будет правая, потом нижняя, и потом левое значение margin.
Пользуясь универсальными свойствами,
мы всегда задаем значения со всех четырех сторон.
При этом некоторое значение мы можем не указывать,
и браузер автоматически подставляет эти значения.
Например, что будет, если мы не укажем значение margin left?
В таком случае браузер скопирует туда значение, которое вы указали для
margin right, и у вас получатся одинаковые margin слева и справа.
Аналогичное происходит, если вы не укажете нижний margin — margin bottom.
Тогда браузер скопирует значение margin top.
И наконец, если вы укажете только одно значение,
то оно будет скопировано во все четыре, то есть справа, снизу и слева.
Также надо помнить, что если вы не хотите задавать значения
со всех четырех сторон, то есть специальные точечные свойства.
Они так и называются: margin left, margin right и так далее.
В качестве значений отступов можно указывать не только пиксели, но и,
например, процентные значения.
При этом браузеры начинают вычислять их относительно содержащего блока.
Так, например, ширина, заданная в процентах,
считается относительно ширины содержащего блока.
Высота, заданная в процентах, будет считаться относительно высоты содержащего
блока только в тех случаях, когда она явно указана у содержащего блока.
Иначе высота будет игнорироваться.
Margin слева и справа и padding слева и справа,
заданные в процентах, также считаются относительно ширины содержащего блока,
а не относительно ширины текущего элемента.
И, наконец, высота содержащего блока, если она не задана,
будет равна сумме места, занимаемого детьми этого блока.
Наконец, последнее, о чем хотелось бы рассказать,
это указание margin или padding сверху и снизу в процентах.
Многие думают, что они будут считаться относительно высоты, но это не так.
Они всегда считаются относительно ширины содержащего элемента.
Так происходит, потому что в противном случае браузер войдет в рекурсию и
будет бесконечно вычислять высоту содержащего блока.
Эту особенность можно использовать в плюс, например,
если вы будете задавать пропорции картины.
Давайте перейдем к примерам.
Первый пример, это когда мы содержащему блоку,
который у нас обозначается на слайде красным цветом, не задаем ни высоту,
ни ширину, а внутреннему блоку в данном случае мы задаем высоту и ширину 50 %.
Как вы можете увидеть, ширина в 50 % действительно применилась,
и у нас блок равен половине содержащего, а высота была просто проигнорирована.
Если вы помните, ранее я сказал: «Высота применяется только тогда,
когда она явно задана у содержащего блока», чего нет в данном случае.
Если же мы высоту укажем, то у нас применится
и для внутреннего блока высота, и он станет равен половине от высоты родителя.
Следующий пример, это когда мы задаем margin и padding в процентах.
Я специально здесь изменяю ширину содержащего блока,
чтобы вы увидели, как они применяются.
Следующее CSS свойство, о котором мы с вами поговорим, это граница, или border.
Синтаксис этого CSS свойства такой: для того чтобы отобразить границу элемента,
нужно задать ее размер, тип и цвет.
Есть свойство, которое позволяет задать границу только
с одной стороны, например, с левой.
Также есть специальное универсальное свойство, которое позволяет задать
либо размер границы со всех четырех сторон, либо цвет, либо тип.
И, наконец, есть свойство, которое позволяет задать, например,
цвет только левой границы или тип только правой границы.
Давайте рассмотрим на примере.
В данном случае мы задаем синюю границу типа точечками 20 пикселей,
это мы и видим на экране.
Тип бывает разный, например, мы можем задать не точечками,
а черточками, тогда это будет ключевое слово dashed.
Мы можем задать — и чаще всего,
это самый наиболее употребимый способ задания границы — монолитный,
или solid, когда граница будет выглядеть как сплошная линия.
Интереснее выглядит ситуация, когда мы задаем разные цвета с разных сторон,
например, здесь сверху и снизу мы задали синий цвет, а слева и справа — красный.
Можно увидеть, что сочленения этих границ выглядят как диагональ от угла в угол.
Чаще всего такую особенность используют для того,
чтобы рисовать стрелки с помощью CSS.
И наконец, можно комбинировать вообще несколько различных способов задания
границы и задать сверху монолитную, справа черточками, снизу точечками.
