Какое свойство определяет отступ от левого края параграфа

ÐдÑавÑÑвÑйÑе, доÑогие дÑÑзÑÑ!
РаÑÑмоÑÑим неÑколÑко ÑпоÑобов как ÑделаÑÑ Ð¾ÑÑÑÑп ÑекÑÑа в HTML.
ÐÑÑÑÑп ÑекÑÑа в HTML пÑи помоÑи margin
Ðогда Ð²Ñ ÑазмеÑаеÑе ÑекÑÑ Ð½Ð° ÑайÑе он Ð½Ð°Ñ Ð¾Ð´Ð¸ÑÑÑ Ð² каком-Ñо Ñеге. ÐÑо Ð¼Ð¾Ð¶ÐµÑ Ð±ÑÑÑ Ñег блока <div>, Ñег ÑаблиÑÑ <table>, абзаÑа <p>, ÑекÑии <section> и Ñак далее.
ÐÑ Ð¼Ð¾Ð¶ÐµÐ¼ задаÑÑ Ð¾ÑÑÑÑп Ð´Ð»Ñ Ñега в коÑоÑом Ð½Ð°Ñ Ð¾Ð´Ð¸ÑÑÑ ÑекÑÑ Ð¿Ñи помоÑи CSS ÑвойÑÑва margin.
ÐелаеÑÑÑ ÑÑо Ñак:
<div style=âmargin-left:20px;â> ТекÑÑ Ð±Ð»Ð¾ÐºÐ° HTML </div> |
ÐдеÑÑ Ð¼Ñ Ð²Ð¾ÑполÑзовалиÑÑ Ð°ÑÑибÑÑом style и в нÑм Ñказали нÑжное CSS ÑвойÑÑво, задав ÑекÑÑÑ Ð¾ÑÑÑÑп Ñлева 20px. Так же Ð¼Ñ Ð¼Ð¾Ð¶ÐµÐ¼ задаÑÑ Ð´Ð»Ñ Ð½Ð°Ñего блока или дÑÑгого Ñега клаÑÑ Ð¸ поÑом в оÑделÑном CSS Ñайле допиÑаÑÑ Ð´Ð»Ñ Ð½ÐµÐ³Ð¾ ÑÑили.
HTML:
<div class=»text-block»> ТекÑÑ Ð±Ð»Ð¾ÐºÐ° </div> |
CSS:
.text-block { margin-left:20px; } |
ÐÑли Ð²Ñ Ð½Ðµ ÑоздаÑÑе ÑÑÑаниÑÑ Ñ Ð½ÑлÑ, а ÑедакÑиÑÑеÑе Ñже ÑÑÑеÑÑвÑÑÑÑÑ, Ñо можно не задаваÑÑ Ð½Ð¾Ð²Ñй клаÑÑ, а опÑеделиÑÑ Ñже имеÑÑийÑÑ ÐºÐ»Ð°ÑÑ Ð¸Ð»Ð¸ иденÑиÑикаÑоÑ. Ðак ÑÑо ÑделаÑÑ Ð¿Ð¾ÐºÐ°Ð·Ð°Ð½Ð¾ в ÑÑой ÑÑаÑÑе:
«Ðак опÑеделиÑÑ ID и клаÑÑ ÑлеменÑа на ÑÑÑаниÑе?»
ÐÑи помоÑи ÑÑого ÑвойÑÑва Ð¼Ñ Ð¼Ð¾Ð¶ÐµÐ¼ задаÑÑ ÑазнÑе оÑÑÑÑÐ¿Ñ ÑекÑÑÑ Ð² HTML:
- margin-left — ÑаÑÑÑоÑние Ñлева
- margin-right — ÑаÑÑÑоÑние ÑпÑава
- margin-top — ÑаÑÑÑоÑние ÑвеÑÑ Ñ
- margin-bottom — ÑаÑÑÑоÑние ÑнизÑ
Так же можно одновÑеменно в одной ÑÑÑоке задаÑÑ Ð¾Ð´Ð¸Ð½Ð°ÐºÐ¾Ð²Ñе или ÑазнÑе оÑÑÑÑÐ¿Ñ Ñо вÑÐµÑ ÑÑоÑон:
- margin: 10px; — делаем оÑÑÑÑп ÑекÑÑа 10px Ñо вÑÐµÑ ÑÑоÑон
- margin: 15px 30px; — задаÑм оÑÑÑÑп ÑÑеÑÑ Ñ Ð¸ ÑÐ½Ð¸Ð·Ñ Ð¿Ð¾ 15px, а ÑпÑава и Ñлева по 30px
- margin: 15px 25px 35px 45px; — оÑÑÑÑп ÑвеÑÑ Ñ 15px, Ñлева â 25px, ÑÐ½Ð¸Ð·Ñ â 30px, ÑпÑава â 45px
ÐмеÑÑо пикÑелей Ð²Ñ Ñак же можеÑе задаваÑÑ %, em, rem и дÑÑгие единиÑÑ.
ÐбÑаÑиÑе внимание, еÑли Ð²Ñ Ð·Ð°Ð´Ð°ÑÑе веÑÑ Ð½Ð¸Ð¹ или нижний оÑÑÑÑп Ð´Ð»Ñ Ñега <a>, <span>, <b> — Ñо, ÑкоÑее вÑего, он не ÑÑабоÑаеÑ. ÐÑо ÑвÑзано Ñ Ñем ÑÑо веÑÑ Ð½Ð¸Ð¹ и нижний margin ÑабоÑÐ°ÐµÑ ÑолÑко Ð´Ð»Ñ Ð±Ð»Ð¾ÑнÑÑ ÑлеменÑов HTML, а ÑказаннÑе вÑÑе Ñеги ÑвлÑÑÑÑÑ ÑÑÑоÑнÑми. ÐÐ»Ñ ÑеÑÐµÐ½Ð¸Ñ Ð¿ÑÐ¾Ð±Ð»ÐµÐ¼Ñ Ð¼Ð¾Ð¶Ð½Ð¾ дополниÑелÑно задаÑÑ ÑÑÐ¾Ð¼Ñ ÑÐµÐ³Ñ CSS ÑвойÑÑво display:inline-block; ÑÑÐ¾Ð±Ñ Ðº Ð½ÐµÐ¼Ñ Ð¿ÑименÑлиÑÑ ÑвойÑÑва одновÑеменно блоÑного и ÑÑÑоÑного ÑлеменÑа HTML.
ÐÑÑÑÑп ÑекÑÑа в HTML пÑи помоÑи padding
ÐÑÐ¾Ñ ÑпоÑоб оÑÐµÐ½Ñ Ð¿Ð¾Ñ Ð¾Ð¶ на пÑедÑдÑÑий, но еÑли margin задавал оÑÑÑÑп до ÑекÑÑа как Ð±Ñ ÑнаÑÑжи Ñега, Ñо padding бÑÐ´ÐµÑ Ð·Ð°Ð´Ð°Ð²Ð°ÑÑ Ð¾ÑÑÑÑп внÑÑÑи.
<div style=âpaddint-top:20px;â> ТекÑÑ Ð±Ð»Ð¾ÐºÐ° </div> |
Так же можно пÑиÑвоиÑÑ ÐºÐ»Ð°ÑÑ Ð² HTML коде или воÑполÑзоваÑÑÑÑ Ñже ÑÑÑеÑÑвÑÑÑим и допиÑаÑÑ ÑÑо ÑвойÑÑво емÑ:
CSS:
.text-block { padding: 20px 10px 15px 20px; } |
С его помоÑÑÑ Ñак же можно задаÑÑ ÑазнÑе оÑÑÑÑÐ¿Ñ ÑекÑÑа в HTML:
- padding-left — Ñлева
- padding-right — ÑпÑава
- padding-top — ÑвеÑÑ Ñ
- padding-bottom — ÑаÑÑÑоÑние ÑнизÑ
- padding: 25px; — оÑÑÑÑп Ñо вÑÐµÑ ÑÑоÑон.
ÐÑÑÑÑп ÑекÑÑа html пÑи помоÑи неÑазÑÑвного пÑобела
СÑÐ°Ð·Ñ ÑÐºÐ°Ð¶Ñ ÑÑо Ñ ÑÑÐ¾Ñ ÑпоÑоб не лÑÐ±Ð»Ñ Ð¸ не ÑекомендÑÑ, но иногда он Ð¼Ð¾Ð¶ÐµÑ Ð¿Ð¾Ð½Ð°Ð´Ð¾Ð±Ð¸ÑÑÑ. СÑÑÑ ÐµÐ³Ð¾ заклÑÑаеÑÑÑ Ð² Ñом ÑÑо в HTML еÑÑÑ ÑпеÑиалÑнÑй Ñег, коÑоÑÑй позволÑÐµÑ Ð´Ð¾Ð±Ð°Ð²Ð»ÑÑÑ Ð½ÐµÑазÑÑвнÑй пÑобел
- ÐÑли Ð²Ñ Ð¿Ð¾ÑÑавиÑе ÑÑÐ¾Ñ Ñег в ÑекÑÑе Ð¼ÐµÐ¶Ð´Ñ Ñлов или внаÑале ÑÑÑоки Ñо он ÑоздаÑÑ Ð¾ÑÑÑÑп ÑавнÑй по ÑиÑине 1 пÑобелÑ. ÐоÑÑавив неÑколÑко Ð²Ñ Ð¼Ð¾Ð¶ÐµÑе ÑвелиÑиÑÑ ÑаÑÑÑоÑние Ð¼ÐµÐ¶Ð´Ñ Ñловами.
- ÐÑли поÑÑавиÑÑ Ð¼ÐµÐ¶Ð´Ñ ÑÑÑок Ñо он ÑоздаÑÑ Ð²ÐµÑÑикалÑнÑй оÑÑÑÑп ÑавнÑй по вÑÑоÑе одной ÑÑÑоке. ÐопиÑав неÑколÑко (каждÑй Ñ Ð½Ð¾Ð²Ð¾Ð¹ ÑÑÑоки) можно ÑвелиÑиÑÑ ÑÑо ÑаÑÑÑоÑние.
HTML:
<p>ÐадаÑм в HTML</p> |
ÐÑÑÑÑп ÑекÑÑа в HTML пÑи помоÑи text-indent
ÐÑли вам нÑжно задаÑÑ Ð¾ÑÑÑÑп в HTML не Ð´Ð»Ñ Ð²Ñего ÑекÑÑа на ÑÑÑаниÑе, а лиÑÑ ÑолÑко Ð´Ð»Ñ Ð¿ÐµÑвой ÑÑÑоÑки одного или неÑколÑÐºÐ¸Ñ Ð°Ð±Ð·Ð°Ñев, Ñо ÑÑо можно ÑделаÑÑ Ð¿Ñи помоÑи ÑвойÑÑва text-indent
HTML:
<div style=»text-indent:25px;»> ÐдеÑÑ ÑекÑÑ HTML блока</div> |
ЧÑо делаÑÑ ÐµÑли оÑÑÑÑп не поÑвлÑÑÑÑÑ?
ÐÑваÑÑ ÑиÑÑаÑии, когда Ð²Ñ Ð·Ð°Ð´Ð°ÑÑе оÑÑÑÑп ÑекÑÑа HTML одним из пÑедложеннÑÑ
ÑпоÑобов, а он не пÑименÑеÑÑÑ.
ÐÑиÑин здеÑÑ Ð¼Ð¾Ð¶ÐµÑ Ð±ÑÑÑ Ð½ÐµÑколÑко. Ðаиболее ÑаÑпÑоÑÑÑанÑннÑе опиÑÐ°Ð½Ñ Ð² ÑÑой ÑÑаÑÑе: «ÐоÑÐµÐ¼Ñ Ð½Ðµ ÑабоÑаÑÑ CSS-ÑÑили?»
ÐÑли Ð²Ñ Ð·Ð½Ð°ÐµÑе еÑÑ ÐºÐ°ÐºÐ¸Ðµ Ñо ÑпоÑÐ¾Ð±Ñ ÐºÐ°Ðº ÑделаÑÑ Ð¾ÑÑÑÑп ÑекÑÑа HTML напиÑиÑе Ð¸Ñ Ð² комменÑаÑиÑÑ . ÐÑли ÑÑаÑÑÑ Ð±Ñла Ð´Ð»Ñ Ð²Ð°Ñ Ð¿Ð¾Ð»ÐµÐ·Ð½Ð¾Ð¹ — делиÑеÑÑ ÐµÐ¹ в ÑоÑиалÑнÑÑ ÑеÑÑÑ . Так Ð²Ñ Ð¿Ð¾Ð¼Ð¾Ð³Ð°ÐµÑе мне ÑазвиваÑÑ ÑайÑ.
УÑÐ¿ÐµÑ Ð¾Ð² вам в оÑоÑмлении ваÑÐ¸Ñ ÑайÑов и не ÑолÑко!
С Ñважением Ð®Ð»Ð¸Ñ ÐÑÑаÑÑ
Анонимный вопрос · 19 июля 2018
80,6 K
Внутренние отступы задаются с помощью padding, внешние с помощью margin.
padding: 1px — со всех сторон внутренний отступ 1 пиксель
padding: 1px 2px — по вертикали 1 пиксель а по горизонтали 2 пикселя
padding: 1px 2px 3px — сверху 1 пиксель по бокам 2 пикселя снизу 3 пикселя
padding: 1px 2px 3px 4px — сверху 1, справа 2, снизу 3, слева 4
с margin такая же ситуация
Магистр Йода медицинской физики. 17 лет люблю горы ???? и собак ????
Для внутренних отступов есть свойства padding, для внешних margin.
Можно задать с какой-либо одной стороны padding-left, padding-right, padding-top, padding-bottom, для margin аналогично.
Например:
/* внешний отступ слева 15px */
margin-left: 15px;
/* внутренний отступ снизу 45px */
padding-bottom: 45px;
Можно использовать сокращенные записи, например:
/* внутренний… Читать далее
это же CSS ,а не HTML. А в вопросе четко сказано ,как это делать в HTML
-Для создания отступа можно воспользоваться включением в HTML кода CSS.в тег абзаца <p> включите параметр text-indent:
<p style = “text-indent: 15px;”>Текст абзаца</p>
Этот код создает абзац с отступом в 15 пикселей слева
-Отрегулировать отступы можно при помощи создания таблиц и применения параметров cellpadding и cellspacing.
-Задать необходимый промежуток между… Читать далее
А можно параметр text-indent использовать не в <p>?
В стили класса или тэга задаешь padding-left: 10px. Он увеличивает ширину блока. Если не хочешь менять ширину задай margin-left: 10px.
Тегу body задай box-sizing: border-box, тогда padding будет работать как margin
Как отложить загрузку CSS?
Для асинхронной загрузки CSS можно использовать jQuery, если вы уже применяется его на своем сайте.
Добавьте следующий скрипт:
$(«head»).append(«<link rel=’stylesheet’ type=’text/css’ href=’/styles.css’ />»);
Если этот код необходимо выполнить после загрузки документа и jQuery соответственно, например в методе ready, то пишем следующее:
$(document).ready(function() {
$(«head»).append(«<link rel=’stylesheet’ type=’text/css’ href=’/styles.css’ />»);
})
Прочитать ещё 2 ответа
Как сделать отступ в ворде?
Для этого должна быть включена «Литейка». Нажмите вверху «Вид», поставьте галочку у «Литейка». Подвигав треугольнички линейки Вы добьётесь любых отступов для выделенных строк и слева, и справа, и абзацного. Вперёд!
Прочитать ещё 3 ответа
Как запомнить HTML-теги?
Прожила год в Токио, училась в языковой школе. Влюблена в японскую классику…
Сначала лучше запомнить основные теги, а потом уже те, с помощью которых можно форматировать текст. Чем больше будет практики, тем легче будет запомнить все теги. Удачи 🙂
Прочитать ещё 1 ответ
Как разделить мобильную и десктопную верстку сайта?
Хотел бы сразу вас отговорить от такого решения, это усложняет управление версткой, любое внесение изменений будет усложняться дублированием кода в разных версиях верстки, но если не убедил, и вы хотите это реализовать, то можно через передачу параметров экрана в php скрипт, который уже будет подключать нужные стили и скрипты, по сути генерировать разный html код в зависимости от разрешения, базовая конструкция такая:
- // проверяем существование переменных $width и $height
- if (isset($_GET[‘width’]) AND isset($_GET[‘height’])) {
- // если переменные существуют, то выводим полученные значения на экран
- echo ‘Ширина экрана: ‘ . $_GET[‘width’] . «<br />n»;
- echo ‘Высота экрана: ‘ . $_GET[‘height’] . «<br />n»;
- }
- // если переменные не существуют, то выполняем следующее
- else {
- // PHP сгенерирует код JavaScript, который обработает браузер
- // пользователя и передаст значения обратно PHP-скрипту через протокол HTTP
- echo «<script language=’javascript’>n»;
- echo » location.href=»${_SERVER[‘SCRIPT_NAME’]}?${_SERVER[‘QUERY_STRING’]}»
- . «width=» + screen.width + «&height=» + screen.height;n»;
- echo «</script>n»;
- }
- ?>
В зависимости от значения переменных $_GET[‘width’] и $_GET[‘height’] подключайте что вам нужно.
Изменение расстояния между абзацами HTML?
Партнёрские программы, инструменты для вебмастера, рейтинг хостингов · siterost.net
Вы можете изменить расстояние между абзацами при помощи CSS-свойства margin, либо более специфичных margin-top (отступ сверху) и margin-bottom (отступ снизу).
Вот пример кода:
p {
margin-top: 10px;
}
Для того, чтобы убрать отступ у первого абзаца, можно добавить также
p:first-child {
margin-top: 0;
}
В приведенном выше примере задается отступ сверху. Несмотря на то, что вы можете задавать отступ и снизу, я все-таки рекомендую отступать именно сверху, т.к. таким образом у вас не будет лишних отсупов между блоком текста, внутри которого располагаются абзацы и следущим за ним блоком.
Прочитать ещё 1 ответ
Сегодня мы поговорим с вами немного о принципах верстки, а именно – о способах организации отступа на вашем сайте у определенных элементов.
В качестве рассматриваемого элемента, у которого необходимо сделать отступ, может быть текст, изображение, таблица или любой другой HTML-элемент. Главное – это следовать некоторым важным правилам, о которых я сейчас расскажу.
Если вы еще только создаете свой сайт, то я рекомендую вам в верх вашего главного файла стилей вставить следующие свойства:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Зачем это нужно, спросите вы? Отвечаю на ваш вопрос наглядным примером.
Допустим, у вас есть такой элемент верстки:
<div style=»width: 250px;border: 1px solid;padding: 20px;»>
Hello, world!
</div>
Так будет выглядеть вариант без использования описанных выше свойств (верхний элемент) и с их использованием (нижний элемент):
Что здесь видно? Что ширина элемента в первом варианте (без использования свойств) стала больше указанной за счет добавленных отступов, что является не совсем удобным и правильным в плане верстки.
Вариант со свойствами куда более эстетичнее, но использовать его стоить осознанно, ведь при добавлении их в уже готовый сайт вы рискуете получить поехавший дизайн и «головную боль» в виде приведения всего этого в должный вид. Все проекты, которые мне довелось вести с нуля, не обошлись без этих свойств.
А теперь, собственно, поговорим о вариантах организации отступов у элементов на вашем сайте с наглядными примерами.
Внутренний отступ с помощью CSS-свойства «padding»
Чтобы вы понимали всю логику вещей, возьмем для примера следующий фрагмент верстки:
<div class=»test_div»>
Hello, world!
</div>
<div class=»test_div»>
Hello, world!
</div>
со своими стилями:
.test_div {
width: 250px;
border: 1px solid;
}
Визуальный вариант получается таким:
Что из себя представляет свойство «padding»? Оно помогает организовать внутренний отступ в указанных элементах. Добавим к нашей верстке внутренний отступ, равный 10px:
.test_div {
width: 250px;
border: 1px solid;
padding: 10px; // Внутренний отступ 10px
}
Визуально это получается так:
Число 10 в свойстве говорит о том, что внутри указанных элементов с каждой из их четырех сторон необходимо добавить отступ, равный 10px. Пиксели (px) могут быть заменены на проценты или другую поддерживаемую в CSS величину.
Всего существует два варианта указания сторон, с которых необходимо сделать отступы.
Первый – это с явным указанием сторон:
padding-top: 10px; // Внутренний отступ 10px сверху
padding-right: 10px; // Внутренний отступ 10px справа
padding-bottom: 10px; // Внутренний отступ 10px снизу
padding-left: 10px; // Внутренний отступ 10px слева
В таком случае для каждой стороны используется свое свойство. И второй:
padding: 10px 0 0 0; // Внутренний отступ 10px сверху, все остальное — 0px
padding: 10px 0; // Внутренний отступ 10px сверху и снизу, а по бокам — 0px
padding: 0 10px; // Внутренний отступ 0px сверху и сниз, а по бокам — 10px
Здесь идет простое перечисление значений, каждое из которых соответствует своей стороне. Стороны задаются так: первое значение – верх, второе – право, третье – низ и четвертое – лево, то есть все по часовой стрелке.
Если значения два[/b] (верх и право), то это значит, что зеркально эти же значения уходят вниз и влево и только так. Вроде бы все понятно. Если для какой-то из сторон вам не нужно задавать отступ – значение для этой стороны выставляете «0». Этот вариант мне нравится больше, так как он более компактный, но в своих начинаниях я использовал именно первый вариант.
Этот тип отступов хорошо подходит для разделения текста, содержания ячеек таблиц и прочей текстовой информации. Для разделения же самих элементов, подобных тем, что в примере выше, существует другое свойство.
Внешний отступ с помощью CSS-свойства «margin»
Отличительная особенность свойства «margin» – это то, что отступ добавляется вне элемента, то есть внешний.
Вариантов добавления здесь также два.
Первый – с явным указанием стороны:
margin-top: 10px; // Внешний отступ 10px сверху
margin-right: 10px; // Внешний отступ 10px справа
margin-bottom: 10px; // Внешний отступ 10px снизу
margin-left: 10px; // Внешний отступ 10px слева
Второй – с перечислением значений, каждое из которых соответствует своей стороне:
margin: 10px 0 0 0; // Внешний отступ 10px сверху, все остальное — 0px
margin: 10px 0; // Внешний отступ 10px сверху и снизу, а по бокам — 0px
margin: 0 10px; // Внешний отступ 0px сверху и сниз, а по бокам — 10px
Здесь описывать все нюансы работы с правилами я не буду, все так же, как и о свойстве «padding», о нем написано выше.
Используем margin со следующим значением:
.test_div {
width: 250px;
border: 1px solid;
margin: 10px; // Внешний отступ 10px
}
Визуально это будет выглядеть так:
Как видно из примера, в таком случае добавляется внешний отступ, разделяющий между собой указанные элементы.
Важная особенность: если вы внимательно смотрели на результат, то могли заметить, что соседние отступы у элементов не суммируются. То есть если первый элемент имеет внешний нижний отступ, равный 10px, а второй – внешний верхний отступ с этим же значением, то общее расстояние между ними будет равно также 10px. Если 10 и 15 соответственно, то общее – 15 и так далее.
Этот вариант отступов часто используется в тексте, а именно в оформлении параграфов, а также в элементах, которые имеют видимые границы.
Но оба свойства не ограничиваются лишь этими элементами. Варианты их использования вы выбираете сами, я лишь постарался преподнести вам основу о них.
В этой статье я хотел бы рассказать, как правильно расставлять поля (padding) и отступы (margin) в CSS.
Прежде всего давайте вспомним определение полей и отступов согласно спецификации W3C. В боксовой модели (box model) поля — это расстояние между контентом (content) и границей блока (border). А отступы это расстояние между границей блока и границей соседнего или родительского элемента.
Таким образом, если граница и фон элемента не заданы, то нет разницы, использовать свойство padding или margin для задания отступов, но при условии, что ширина (width) и высота (height) элемента не заданы и не изменен алгоритм расчета размеров контента с помощью свойства box-sizing.
В любом случае следует помнить, что поля могут быть как включены в ширину или высоту элемента, так и нет. Отступы же всегда задаются снаружи элемента.
Теперь давайте рассмотрим как правильно расставлять поля и отступы между элементами. Возьмем в качестве примера следующий блок.
Это блок новостей news. Он состоит из заголовка, списка новостей и ссылки «Другие новости». Дадим им следующие названия классов: news__title, news__list и news__more-link.
<div class=»news»>
<h2 class=»news__title»>Новости</h2>
<ul class=»news__list»>
<li class=»news__list-item»>…</li>
<li class=»news__list-item»>…</li>
<li class=»news__list-item»>…</li>
</ul>
<p class=»news__more-link»><a href=»…»>Другие новости</a></p>
</div>
Поскольку каждый из этих элементов имеет одинаковые отступы слева и справа, то лучше задать поля родительскому блоку, а не задавать отступы слева и справа для каждого элемента в отдельности.
.news {
padding: 20px 25px;
}
Таким образом, при необходимости изменить значение полей справа и слева это нужно будет сделать в одном месте. А при добавлении нового элемента внутрь блока новостей, он уже будет иметь нужные отступы слева и справа.
Часто бывает так, что все элементы внутри блока имеют одинаковые отступы слева и справа, кроме одного, который вообще не должен иметь отступов, например, из-за фона. В этом случае для элемента можно задать отрицательные отступы. Тогда не придется убирать поля внутри блока для остальных элементов.
Теперь нужно задать вертикальные отступы между элементами. Для этого следует определить какой из элементов является обязательным. Очевидно что блок новостей не может существовать без списка новостей, в то же время ссылки «Другие новости» может и не быть, заголовок тоже может быть убран, например, при изменении дизайна.
Учитывая это, задаем для заголовка отступ снизу, а для ссылки «Другие новости» отступ сверху.
.news__title {
margin-bottom: 10px;
}
.news__more-link {
margin-top: 12px;
}
Мы могли бы достигнуть такого же внешнего результата, добавив отступы сверху и снизу для списка новостей.
.news__list {
margin: 10px 0 12px 0;
}
Но в этом случае при убирании ссылки «Другие новости» внизу остается лишний отступ. То же самое справедливо и для заголовка. Очевидно, что первый вариант является более правильным, поскольку позволяет гибко изменять внешний вид блока.
Теперь нужно задать отступы между отдельными новостями. Опять же, нужно принять во внимание, что количество новостей может меняться, и в списке может быть только одна новость.
Можно задать для каждой новости кроме первой отступ сверху, либо для каждой новости кроме последней отступ снизу. Первый вариант более предпочтителен, поскольку псевдоселектор :first-child был добавлен в спецификации CSS 2.1 и имеет более широкую поддержку, в отличие от псевдоселектора :last-child, который был добавлен только в спецификации CSS версии 3.0.
.news__list-item {
margin-top: 18px;
}
.news__list-item:first-child {
margin-top: 0;
}
Таким образом, правильная расстановка полей и отступов позволяет гибко менять внешний вид любого блока без внесения изменений в стили и без нарушений в дизайне. Самое главное — определить, какие элементы блока являются основными (обязательными), а какие опциональными.
Иногда мы не можем опираться на обязательные элементы. Например, у нас есть всплывающее окошко popup, внутри которого может выводиться какой-то заголовок и текст. Причем в каких-то случаях может не быть текста, а в каких-то и заголовка. То есть оба элемента являются опциональными.
В этом случае можно использовать следующий способ задания отступов.
.popup__header + .popup__text {
margin-top: 15px;
}
jsfiddle.net/onfv42mz/1
Тогда отступ появится, только если будут использоваться оба элемента. В случае же вывода только заголовка или только текста, лишнего отступа не будет.
Схлопывание вертикальных отступов
Еще один нюанс, о котором не все знают, связан с вертикальными отступами между соседними блоками. В определении отступов, которое я приводил выше, сказано, что отступ — это расстояние между границами текущего и соседнего блока. Таким образом, если мы расположим два блока друг под другом и зададим одному из них отступ снизу в 30px, а другому отступ сверху в 20px, отступ между ними будет не 50px, а 30px.
.block1 {
margin-bottom: 30px;
}
.block2 {
margin-top: 20px;
}
jsfiddle.net/j99btnc8
То есть произойдет наложение отступов, и отступ между блоками будет равен наибольшему отступу, а не сумме отступов. Этот эффект также называют «схлопыванием».
Прошу заметить, что горизонтальные отступы, в отличие от вертикальных, не «схлопываются», а суммируются. Поля (padding) также суммируются.
Зная о «схлопывании» отступов, мы можем использовать эту особенность в свою пользу. Например, если нам необходимо расставить отступы для заголовков и текста внутри статьи, то для заголовка первого уровня зададим отступ снизу в 20px, а для заголовка второго уровня отступ сверху 20px и снизу 10px, а для всех параграфов зададим отступ сверху 10px.
h1 {
margin-bottom: 24px;
}
h2 {
margin-top: 24px;
margin-bottom: 12px;
}
p {
margin-top: 12px;
}
jsfiddle.net/n27fms7s/1
Теперь заголовок h2 можно расположить как после заголовка h1, так и после параграфа. В любом случае отступ сверху не будет превышать 24px.
Общие правила
Подводя итог, я бы хотел перечислить правила, которых я придерживаюсь при расстановке полей и отступов.
- Если соседние элементы имеют одинаковые отступы, то лучше задавать их родительскому контейнеру, а не элементам.
- При задании отступов между элементами, следует учитывать, обязательный это элемент или опциональный.
- Для списка однотипных элементов — не забывать о том, что число элементов может варьироваться.
- Помнить о наложении вертикальных отступов и использовать эту особенность там, где она принесет пользу.