4.1 верстаем обьявление
шпаргалка с урока: https://jsfiddle.net/crzdvl/u7ow38fp/119/
как добавить веб-шрифт?
сайт с которого берем шрифты - https://fonts.google.com/
больше css - больше креатива
display: flex
как вы видите наши элементы стали в ряд. это по умолчанию заложено при добавления стиля display: flex
, то есть когда вы добавляете этот стиль, то по умолчанию скрыто добавляется и этотflex-direction: row
, но есть ещё парочка свойств, который вы можете использовать
также есть такое свойство justify-content
- отвечает за выравнивание элементов по оси/линии
больше свойств: https://tproger.ru/translations/how-css-flexbox-works/
margin и padding
что такое border мы уже учили, помните? это когда мы делали обводку вокруг разных тегов. margin - это внешний отступ от элемента, padding - это внутренний отступ от элемента. вот как это видит наш браузер
рассмотрим на примере. ниже слева видно абзац с padding: 30px
вокруг него(пустое место вокруг текста). Зеленый цвет на изображении ниже справа – это padding, который расположен вокруг контейнера. то есть это расстояние которое мы сказали, чтобы было пустое вокруг нашего текста
теперь добавим margin абзацу. Я добавлю margin: 30px. Ниже на изображении слева показано, как этот абзац изменился с margin. Фактическая ширина изображения стала меньше, потому что margin отталкивает от границ другой HTML элемент. Справа видно, что оранжевый цвет – это margin вокруг элемента. margin всегда находится за пределами padding и темно-синий фон не распространяется на область margin
запись margin и padding
полезные ссылки:
Last updated