Содержание

Расстановка полей и отступов в CSS / Хабр

В этой статье я хотел бы рассказать, как правильно расставлять поля (padding) и отступы (margin) в CSS.

Прежде всего давайте вспомним определение полей и отступов согласно спецификации W3C. В боксовой модели (box model) поля — это расстояние между контентом (content) и границей блока (border). А отступы это расстояние между границей блока и границей соседнего или родительского элемента.

Таким образом, если граница и фон элемента не заданы, то нет разницы, использовать свойство padding или margin для задания отступов, но при условии, что ширина (width) и высота (height) элемента не заданы и не изменен алгоритм расчета размеров контента с помощью свойства box-sizing.

В любом случае следует помнить, что поля могут быть как включены в ширину или высоту элемента, так и нет. Отступы же всегда задаются снаружи элемента.

Теперь давайте рассмотрим как правильно расставлять поля и отступы между элементами.

Возьмем в качестве примера следующий блок.

Это блок новостей news. Он состоит из заголовка, списка новостей и ссылки «Другие новости». Дадим им следующие названия классов: news__title, news__list и news__more-link.

<div>
    <h3>Новости</h3>
    <ul>
        <li>...</li>
        <li>...</li>
        <li>...</li>
    </ul>
    <p><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.

h2 {
    margin-bottom: 24px;
}
h3 {
    margin-top: 24px;
    margin-bottom: 12px;
}
p {
    margin-top: 12px;
}

jsfiddle.net/n27fms7s/1

Теперь заголовок h3 можно расположить как после заголовка h2, так и после параграфа. В любом случае отступ сверху не будет превышать 24px.

Общие правила

Подводя итог, я бы хотел перечислить правила, которых я придерживаюсь при расстановке полей и отступов.

  1. Если соседние элементы имеют одинаковые отступы, то лучше задавать их родительскому контейнеру, а не элементам.
  2. При задании отступов между элементами, следует учитывать, обязательный это элемент или опциональный.
  3. Для списка однотипных элементов — не забывать о том, что число элементов может варьироваться.
  4. Помнить о наложении вертикальных отступов и использовать эту особенность там, где она принесет пользу.

Как задать расстояние между блоками в css

Все, что вам нужно знать об отступах в CSS

На первый взгляд в свойстве margin CSS нет ничего сложного и непонятного. Оно помогает освободить пространство вокруг любого элемента, отодвинув в сторону все остальное. Однако это свойство может оказаться более непредсказуемым, чем вы привыкли думать.

Первое, что узнают о CSS те, кто решил приступить к его изучению, — это, конечно же, блочная модель форматирования документа (The CSS Box Model). Одним из элементов этой модели как раз и является отступ (margin), прозрачная область, окружающая блок, другими словами — его внешние поля, которые отодвигают прочь от содержимого все остальные элементы. Свойства margin-top, margin-right, margin-bottom и margin-left были описаны еще в CSS1, наряду с сокращением margin, которое позволяет определять значения всех четырех свойств сразу.

Отступы кажутся довольно простой вещью, однако в этой статье будет рассмотрены те особенности их применения, которые все еще непонятны многим пользователям, а именно — как отступы взаимодействуют друг с другом и что такое их схлопывание.

Содержание статьи

Блочная модель CSS

Итак, в первую очередь необходимо определить, что подразумевается под словосочетанием «блочная модель» (Box Model) и как менялось содержание этого понятия по мере выхода разных версий CSS.

Блочная модель описывает то, как различные элементы блока (бокса, коробки) — содержимое, внутренние поля, границы и отступы — отображаются на странице и взаимодействуют друг с другом. В CSS1 блочная модель была детализирована с помощью диаграммы ASCII, которую вы можете видеть на изображении ниже:

Описание блочной модели CSS в CSS1

Внешние поля для каждой из сторон блока и сокращение magrin были описаны в CSS1.

Спецификация CSS2.1 располагает иллюстрацией, которая демонстрирует блочную модель и дает определение терминов, которые используются для описания различных блоков. Спецификация описывает content box, padding box, border box и margin box. Как вы можете видеть, любой блочный элемент состоит из этого набора боксов: в центре — контент, его обрамляют внутренние поля (padding), затем следуют границы и потом — внешние поля, отступы.

Описание блочной модели CSS в CSS2

Схлопывание отступов

Спецификация CSS1 в своем определении отступов содержит фразу, что вертикальные отступы могут схлопываться (margins collapse), вкладываться друг в друга. Именно этот момент многих сбивает с толку. Схлопывание отступов небеспричинно, ведь раньше CSS использовался в качестве языка форматирования документов.

Данный процесс описывает ситуацию, когда у блочных элементов расположенных рядом друг с другом по вертикали, отступы не суммируются, а объединяются между собой, то есть если за нижним отступом заголовка следует параграф с верхним отступом, то между ними большого разрыва создано не будет.

При схлопывании отступов они объединяются, меньший отступ, по сути, заканчивается в большем.

  • между соседствующими блоками;
  • между абсолютно пустыми блоками;
  • между родительским и первым или последним дочерним элементом.

Рассмотрим каждый из этих сценариев в отдельности, а затем перейдем к тому, что препятствует схлопыванию отступов.

Соседствующие блоки

Проще всего объяснить, что такое margin collapse, на примере того, как рушатся границы между соседствующими блоками. За исключением ситуаций, упомянутых ниже, если у вас есть два элемента, расположенных друг под другом, нижний отступ первого элемента объединится с верхним отступом следующего элемента.

В примере ниже вы увидите три div-элемента. У первого верхний и нижний отступ равен 50 пикселям, у второго — 20 пикселей, у третьего — 3em. Расстояние между первыми двумя элементами составляет 50 пикселей, поскольку меньший отступ вкладывается в больший. Расстояние между вторым и третьим элементом равен 3ем, так как 3em больше, чем 20 пикселей нижнего отступа второго элемента.

Совершенно пустые блоки

Если блок пуст, то его верхний и нижний отступ могут объединиться друг с другом. В изображенном ниже примере у элемента с классом «empty» верхние и нижние отступы равны 50 пикселям, однако пространство между первым и третьим элементами не 100 пикселей, а 50. Это связано с тем, что два отступа схлопнулись. Добавление чего-либо в этот пустой блок (даже внутренних полей) приведет к тому, что верхние и нижние отступы будут использоваться, а не схлопываться.

Родительский и первый или последний дочерний элемент

Это сценарий схлопывания отступов, который сбивает с толку многих, поскольку не является интуитивно понятным.

В примере ниже имеется div-блок с классом «wrapper» (оболочка): для удобства понимания граница этого блока имеет красный цвет. Все три дочерних элемента имеют отступы размером в 50 пикселей. Однако первый и последний элементы находятся на одном уровне с краями оболочки: между элементом и оболочкой нет 50-пиксельного поля.

Это связано с тем, что отступ дочернего элемента схлопывается с любым отступом на родительском элементе. Вы увидите это, если посмотрите на первый дочерний элемент с помощью DevTools. Выделенная желтая область — это внешние поля, отступы.

DevTools может помочь вам увидеть, где именно заканчиваются отступы

Объединяются только отступы блоков

Из последнего примера можно узнать еще кое-что полезное о схлопывании отступов. В CSS2 возможно объединение внешних полей только тех объектов, которые соседствуют друг с другом вертикально: это верхние и нижние поля, если вы находитесь в горизонтальном режиме записи. Таким образом, левый и правый отступы не объединяются и не выходят за пределы обертки.

Примечание: следует помнить, что поля объединяются только в направлении блока, например, между абзацами.

Что препятствует схлопыванию отступов

Отступы не будут объединяться, если элемент имеет абсолютное позиционирование или он плавающий. Но предположим, что вы столкнулись с ситуацией, когда случился один из описанных выше сценариев. Как вы можете предотвратить процесс коллапса отступов?

Первое, что способно остановить схлопывание, — наличие между соседними элементами еще чего-нибудь.

Например, отступы пустого блока не объединятся, если они будут иметь видимые границы. В приведенном ниже примере был добавлен внутренний отступ (padding) размером в 1 пиксель. Благодаря этому, 50-пиксельные внешние отступы не схлопнулись.

Вполне логично, что если блок ничего не содержит, не имеет видимых границ и отступов, то он и должен быть невидимым. Это может быть пустой элемент абзаца, помещенный в разметку вашего лендинга. Вы, вероятно, не хотели бы, чтобы это привело к появлению больших пробелов между другими абзацами из-за того, что их отступы сохраняются. Добавьте что-нибудь в пустой блок, и вы получите эти пробелы.

То же самое происходит и с отступами на первом или последнем дочерних элементах, которые схлопываются через «родителя». Если мы добавим границу к «родителю», отступы дочерних элементов сохранятся:

Этот сценарий тоже логичен: если наличие обертки вокруг элементов, которая не отображается визуально, важно для семантики, вы, возможно, не захотите, чтобы из-за нее между элементами образовывались большие пустоты. Однако в нем было больше смысла, когда основной формой контента в интернете был текст, но теперь, когда в дизайне используется много других элементов, уже менее полезен.

Создание контекста форматирования блока

Новый контекст форматирования блока (BFC) также предотвращает коллапс отступов в содержащемся элементе. Если еще раз взглянуть на пример с первым и последним дочерними элементами, чьи отступы выходят за пределы обертки, и задать свойству display этой обертки значение flow-root, создавая, таким образом, новый BFC, то отступы останутся внутри.

Изменение значения свойства overflow на auto будет оказывать тот же эффект, так как это также создает новый BFC, хотя он может привести к появлению полос прокрутки, которые могут оказаться вам не нужны.

Контейнеры Flex и Grid

Контейнеры Flex и Grid устанавливают контексты форматирования Flex и Grid для своих дочерних элементов, так что те ведут себя в блочном макете несколько по-другому. К примеру, отступы в этих режимах верстки не схлопываются:

«Контейнер Flex устанавливает новый контекст форматирования для своего содержимого. Это то же самое, что и создание контекста форматирования блока, за исключением того, что вместо блочного макета используется гибкий макет. И в нем отступы контейнера и контента не объединяются друг с другом».

Если вернуться к примеру выше и сделать обертку во flex-контейнере, отображая элементы при помощи flex-direction: column, вы можете видеть, что отступы теперь заключены в обертку. Кроме того, отступы между соседними гибкими элементами не схлопываются, таким образом между этими элементами будет свободное пространство в 100 пикселей:

Что выбрать для своего лендинга?

Из-за схлопывания отступов нужно заранее продумать стратегию работы с ними на своем лендинге. Самое простое, что можно сделать, — это определить отступы только верхней или нижней части элементов. Таким образом, вам не придется быть свидетелем частого margin collapse, потому как сторона элемента с отступом будет прилегать к стороне другого элемента без отступа. Конечно, этот вариант не позволит вам решить проблему объединения отступов дочерних элементов, но, честно говоря, она не так часто встречается.

Понимание того, почему это происходит, позволит вам оперативно находить подходящее решение: можете, к примеру, превратить родительский блок во flex-контейнер (с помощью display: flow-root, который создаст BFC), либо добавить однопиксельный padding.

Знать, почему отступы объединяются и не объединяются, крайне важно, ведь только так вы сможете эффективно разобраться в каждой конкретной ситуации. Что бы вы ни выбрали, обязательно поделитесь этой информацией со своей командой. Довольно часто причина схлопывания отступов окутана ореолом тайны, так что бывает не сразу понятно, как всему этому противостоять. Комментарий в коде поможет решить проблему более оперативно.

Процентная запись

Когда в CSS вы используете проценты, надо помнить, что это всегда процент от чего-то.

Поля (и отступы), заданные с использованием процентов, всегда будут в процентах от инлайнового размера (ширина в горизонтальном режиме записи) родителя. Это означает, что при использовании процентов размер поля (или отступа) будет одинаковым по всему элементу.

В примере ниже обертка шириной 200 пикселей, внутри которой находится блок, чьи отступы равны 10%. Это означает, что отступы равны 20 пикселям, потому что 10% от 200 — это 20.

Отступы в ориентированном на поток мире

На протяжении всей статьи речь шла об отступах между соседствующими друг с другом по вертикали элементами, однако современный CSS заставляет смотреть на вещи в контексте потока. Поэтому, когда говорят о вертикальных отступах, говорят об отступах в размерности блока. Эти поля будут сверху и снизу, если мы находимся в горизонтальном режиме письма, или справа и слева, если в вертикальном.

При этом подходе проще говорить о начале блока и его конце, а не его верхе и низе. Для простоты CSS ввел спецификацию логических свойств и значений. Она сопоставляет относительные свойства потока с физическими словами позиционирования.

Для отступов это дает следующие сопоставления (если мы работаем на английском или в любом другом горизонтальном режиме записи с направлением текста слева направо):

margin-top = margin-block-start
margin-right = margin-inline-end
margin-bottom = margin-block-end
margin-left = margin-inline-start

Также появились два новых сокращения, которые позволяют устанавливать оба блока за раз или оба инлайн:

В примере ниже были использованы ориентированные на поток «ключи», после режим записи был изменен, и вы можете видеть, как отступы следуют за направлением текста и не привязаны к физическому верху или низу.

Блок при горизонтальном и вертикальном режимах письма.

Заключение

Теперь вы знаете об отступах CSS чуточку больше. Вкратце перечислим основные моменты, описанные в статье:

  • схлопывание отступов — это ситуация, когда меньший отступ вкладывается в больший. Понимание того, почему это происходит и как этому помешать, поможет вам решить любые проблемы, причиной которых может стать схлопывание;
  • установка отступов в одном направлении — одно из наиболее простых и эффективных решений проблемы их коллапса;
  • не забывайте делиться со своей командой найденными решениями и оставлять комментарии в коде;
  • оставьте в прошлом физические слова позиционирования (снизу, сверху и т.д.), поскольку сеть становится все более нейтральной к режиму записи.

Инструмент «Произвольный HTML» панели редактора лендингов LPgenerator позволяет интегрировать дополнительные элементы (галереи, внешние формы, виджеты, плееры и т. п.) с применением сторонних кодов (например, JS). Вы можете вставить в свою страницу любой HTML-код.

Простой способ задать отступы между flexbox элементами

Вариант 1 &#8211; отрицательный отступ для родительского блока

Самый простой способ установить минимальное расстояние между элементами flexbox – используем margin: 0 5px для дочерних элементов . item и отрицательный отступ margin: 0 -5px для родительского контейнера .box .

CSS

HTML

See the Pen NWGKWGJ by Denis (@deniscreative) on CodePen.dark

Вариант 2 &#8211; без отрицательного отступа с отступами по бокам

Не используем отрицательные отступы и не используем :first-child/:last-child . Задаем внутреннее поле для контейнера padding:5px и задаем отступы для дочерних элементов margin:5px . Таким образом мы получаем равномерный отступ 10px между дочерними элементами и от дочерних элементов до контейнера.

CSS

HTML

Вариант 3 &#8211; фиксированная ширина с помощью calc()

Задаем фиксированную ширину для дочерних элементов с учетом отступа между ними с помощью CSS функции calc() . Данный способ не совсем хорош для размещения флексбокс-элементов в несколько рядов, потому что элементы растягиваются по краям контейнера justify-content: space-between .

CSS

где 1/3 &#8211; это 3 колонки в ряд, и 10px &#8211; это ширина между колонками.

HTML

Вариант 4 &#8211; фиксированная ширина с помощью calc() с отступами по бокам

Задаем фиксированную ширину для дочерних элементов с учетом отступа между ними с помощью CSS функции calc() . Но главное отличие от предыдущего варианта, что для дочерних элементов .item заданы отступы по бокам, а для родительского контейнера .box заданы отрицательные отступы как в первом примере. И таким образом, мы можем задать justify-content: flex-start; чтобы flexbox-элементы располагались равномерно слева направо.

Я чаще всего использую этот вариант, как наиболее универсальный и удобный для размещения любых flexbox-элементов.

CSS

где 1/3 &#8211; это 3 колонки в ряд, и 10px &#8211; это ширина между колонками.

HTML

Естественно, что способов для того, чтобы задать отступы между флексбокс-элементами или для их равномерного размещения внутри контейнера, гораздо больше, и есть гораздо более изощренные варианты. Но я привел наиболее часто используемые способы и самые простые для понимания.

Задать расстояние между div блоками

Всем привет, помогите сделать конструкцию как на картинке.

Нужно чтобы между красными блоками всегда было расстояние в 1000px. А сами блоки находились по правому левому краю и их ширина была вплоть до конца экрана. Ну а зеленый блок должен быть просто между ними и меть фиксированный размер допустим 300х1000.

Как задать расстояние между блоками по вертикали?
1) Margin только от родительского блока отступает, а мне между соседними надо 2) Padding только.

Как изменить значения div в css, чтобы расстояния между блоками div не было?
Приветствую! Не могу решить такую задачу. Имеется общая обертка div (wrap). Внутри div-wrap.

Расстояние между блоками по вертикали
Имеются блоки: &quot;ab&quot;,&quot;cd&quot; и &quot;ef&quot;: http://jsfiddle.net/SY4Lm/22/ Задача: задать расстояние между.

Разное расстояние между блоками
Почему у меня разное расстояние между блоками?

Сообщение было отмечено Konrak777 как решение

Решение

Как уменьшить расстояние Между блоками?
Добрый вечер. Как начинающий верстальщик,хочу обратиться к умным людям. Помогите убрать.

Как сделать расстояние между блоками горизонтально
Простите за глупый вопрос Мне нужно сделать футер Есть первый блок Когда вставляю второй то он.

Отступы между div блоками
Здравствуйте. Делаю простой сайт. Запутался с отступами между блоками. Указываю необходимую.

Пустое место между блоками div
Всем доброго времени суток! Столкнулся с такой проблемой, при смещении блока &lt;div&gt; вверх, при.

Поля и отступы в CSS

HTML-свойство margin используется для добавления отступа или разрыва между различными элементами. Свойство padding используется для добавления пространства между содержимым и границей (рамкой) указанного HTML-элемента.

Разницу между полем и отступом можно увидеть на следующем рисунке:

Также просмотрите демо-версию, чтобы лучше понять разницу между этими двумя свойствами.

Посмотреть демо-версию и код

У нас есть три элемента div. Первые два — со свойством HTML margin, а третий — со свойством padding. Расстояние между элементами div — это margin, а пространство между текстом внутри третьего элемента div и линией его границы — это padding.

  • Отступы в CSS — cинтаксис CSS-свойств padding и margin
  • Синтаксис CSS-свойства padding
  • Пример для установки полей и отступов в HTML-списке
  • Демонстрация полей на примере HTML-таблицы
  • Пример использования полей и отступов с элементом form

Синтаксис, который используется для единичного объявления свойства CSS margin:

margin: 50px;

Этот код задает отступы во всех направлениях: отступ сверху CSS, отступ снизу CSS, отступ слева CSS и отступ справа CSS. Если необходимо задать отступы для разных направлений, это можно сделать с помощью следующего сокращенного объявления:

margin: 10px 20px 50px 100px;

Где:

  • 10px — отступ сверху CSS;
  • 20px — отступ справа CSS;
  • 30px — отступ снизу CSS;
  • 40px — отступ слева CSS.

Также можно установить отступ слева CSS и другие направления отдельно:

margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;

Примечание: Можно использовать для определения отступа px, pts, cm и т.д.

Свойство padding можно задать с помощью единичного / сокращенного объявления или используя отдельное объявление, а для каждого направления.

Единичное объявление с одним значением:

padding: 50px;

Для каждого направления одиночным объявлением:

padding: 10px 20px 50px 100px;

Если указаны четыре значения, то порядок их следования такой же, как и для свойства HTML CSS margin.

Для каждого направления в отдельности:

padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;

Во вступительной части я показал свойства margin и padding, используемые в элементе div. В этой демо-версии я создал список с помощью пунктов меню, которые являются ссылками. Список размещается внутри элемента div. Он содержит пункты меню в виде гиперссылок.

Список задается и другими свойствами CSS, но без использования свойств HTML margin и padding он будет выглядеть так:

Посмотреть демо-версию и код

Добавив поля 10px для ссылок внутри <ul>:

padding: 10px;

мы получим следующий вид:

Посмотреть онлайн демо-версию и код

Свойство padding добавило пространство между содержимым и границей каждой ссылки. Укажите отступ величиной в 2 пикселя в классе ссылки, и получите следующий вид:

Посмотреть онлайн демо-версию и код

Весь класс для ссылок внутри элемента <ul> будет следующим:

padding: 10px;
margin: 2px;
text-decoration: none;
color: #fff;
background-color: #DA8119;
display:block;

Ниже приводится пример использования свойства padding в HTML-таблице. Я создал таблицу с несколькими строками.

Для таблицы заданы стили с помощью различных свойств CSS. Сначала посмотрите, как выглядит таблица без применения свойства padding:

Посмотреть демо-версию и код

Добавив поля, мы получим таблицу, которая будет выглядеть следующим образом:

Посмотреть демо-версию и код

Ниже приводится код стилей, которые используются для <td>. Весь код можно увидеть, перейдя по ссылке выше:

padding: 20px;
border: dashed 1px #DF7000;
background: #D0E8AC;
color: #000;

Свойства margin padding HTML также можно применять для элементов формы: текстовых полей, кнопок и т.д.

Свойство padding, примененное к текстовому полю, задает пространство между курсором внутри текстового поля и его границей. margin добавляет отступы между различными текстовыми полями или другими элементами формы.

Чтобы стало понятнее, я создам форму и покажу разницу между полями с использованием свойств margin и padding и без. Первоначальный внешний вид формы без применения свойств margin и padding:

Добавив поля к классу текстовых полей и классу кнопки btn, мы получим форму, выглядящую следующим образом:

Поля для текстовых полей:

padding: 10px;

Поля для кнопки:

padding: 9px 15px;

Посмотреть демо-версию и код

Чтобы увеличить или уменьшить отступы между текстовыми полями, используйте свойство HTML CSS margin. В данной демо-версии я использовал отрицательное значение для уменьшения расстояния между полями.

margin: -3px;

Поля формы будут выглядеть следующим образом:

Посмотреть демо-версию и код

После использования отрицательного значения в HTML margin расстояние между текстовыми полями уменьшилось на 3 пикселя.

Использовав свойство padding, мы увеличили расстояние между курсором внутри текстового поля и линией границы, которое задается другими свойствами. Теперь поле выглядит гораздо лучше.

Для кнопки “Save” мы также применили свойство padding:

padding: 9px 15px;

которое используется для выравнивания текста во всех направлениях.

Дайте знать, что вы думаете по данной теме статьи в комментариях. За комментарии, отклики, дизлайки, подписки, лайки огромное вам спасибо!

Вадим Дворниковавтор-переводчик статьи «CSS padding and margin – Explained with 4 HTML elements»

Поля и отступы в CSS

HTML-свойство margin используется для добавления отступа или разрыва между различными элементами. Свойство padding используется для добавления пространства между содержимым и границей (рамкой) указанного HTML-элемента.

Разницу между полем и отступом можно увидеть на следующем рисунке:

Также просмотрите демо-версию, чтобы лучше понять разницу между этими двумя свойствами.

Посмотреть демо-версию и код

У нас есть три элемента div. Первые два — со свойством HTML margin, а третий — со свойством padding. Расстояние между элементами div — это margin, а пространство между текстом внутри третьего элемента div и линией его границы — это padding.

  • Отступы в CSS — cинтаксис CSS-свойств padding и margin
  • Синтаксис CSS-свойства padding
  • Пример для установки полей и отступов в HTML-списке
  • Демонстрация полей на примере HTML-таблицы
  • Пример использования полей и отступов с элементом form

Синтаксис, который используется для единичного объявления свойства CSS margin:

margin: 50px;

Этот код задает отступы во всех направлениях: отступ сверху CSS, отступ снизу CSS, отступ слева CSS и отступ справа CSS. Если необходимо задать отступы для разных направлений, это можно сделать с помощью следующего сокращенного объявления:

margin: 10px 20px 50px 100px;

Где:

  • 10px — отступ сверху CSS;
  • 20px — отступ справа CSS;
  • 30px — отступ снизу CSS;
  • 40px — отступ слева CSS.

Также можно установить отступ слева CSS и другие направления отдельно:

margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;

Примечание: Можно использовать для определения отступа px, pts, cm и т.д.

Свойство padding можно задать с помощью единичного / сокращенного объявления или используя отдельное объявление, а для каждого направления.

Единичное объявление с одним значением:

padding: 50px;

Для каждого направления одиночным объявлением:

padding: 10px 20px 50px 100px;

Если указаны четыре значения, то порядок их следования такой же, как и для свойства HTML CSS margin.

Для каждого направления в отдельности:

padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;

Во вступительной части я показал свойства margin и padding, используемые в элементе div. В этой демо-версии я создал список с помощью пунктов меню, которые являются ссылками. Список размещается внутри элемента div. Он содержит пункты меню в виде гиперссылок.

Список задается и другими свойствами CSS, но без использования свойств HTML margin и padding он будет выглядеть так:

Посмотреть демо-версию и код

Добавив поля 10px для ссылок внутри <ul>:

padding: 10px;

мы получим следующий вид:

Посмотреть онлайн демо-версию и код

Свойство padding добавило пространство между содержимым и границей каждой ссылки. Укажите отступ величиной в 2 пикселя в классе ссылки, и получите следующий вид:

Посмотреть онлайн демо-версию и код

Весь класс для ссылок внутри элемента <ul> будет следующим:

padding: 10px;
margin: 2px;
text-decoration: none;
color: #fff;
background-color: #DA8119;
display:block;

Ниже приводится пример использования свойства padding в HTML-таблице. Я создал таблицу с несколькими строками.

Для таблицы заданы стили с помощью различных свойств CSS. Сначала посмотрите, как выглядит таблица без применения свойства padding:

Посмотреть демо-версию и код

Добавив поля, мы получим таблицу, которая будет выглядеть следующим образом:

Посмотреть демо-версию и код

Ниже приводится код стилей, которые используются для <td>. Весь код можно увидеть, перейдя по ссылке выше:

padding: 20px;
border: dashed 1px #DF7000;
background: #D0E8AC;
color: #000;

Свойства margin padding HTML также можно применять для элементов формы: текстовых полей, кнопок и т.д.

Свойство padding, примененное к текстовому полю, задает пространство между курсором внутри текстового поля и его границей. margin добавляет отступы между различными текстовыми полями или другими элементами формы.

Чтобы стало понятнее, я создам форму и покажу разницу между полями с использованием свойств margin и padding и без. Первоначальный внешний вид формы без применения свойств margin и padding:

Добавив поля к классу текстовых полей и классу кнопки btn, мы получим форму, выглядящую следующим образом:

Поля для текстовых полей:

padding: 10px;

Поля для кнопки:

padding: 9px 15px;

Посмотреть демо-версию и код

Чтобы увеличить или уменьшить отступы между текстовыми полями, используйте свойство HTML CSS margin. В данной демо-версии я использовал отрицательное значение для уменьшения расстояния между полями.

margin: -3px;

Поля формы будут выглядеть следующим образом:

Посмотреть демо-версию и код

После использования отрицательного значения в HTML margin расстояние между текстовыми полями уменьшилось на 3 пикселя.

Использовав свойство padding, мы увеличили расстояние между курсором внутри текстового поля и линией границы, которое задается другими свойствами. Теперь поле выглядит гораздо лучше.

Для кнопки “Save” мы также применили свойство padding:

padding: 9px 15px;

которое используется для выравнивания текста во всех направлениях.

Дайте знать, что вы думаете по данной теме статьи в комментариях. За комментарии, отклики, дизлайки, подписки, лайки огромное вам спасибо!

Вадим Дворниковавтор-переводчик статьи «CSS padding and margin – Explained with 4 HTML elements»

Поля и отступы в CSS

HTML-свойство margin используется для добавления отступа или разрыва между различными элементами. Свойство padding используется для добавления пространства между содержимым и границей (рамкой) указанного HTML-элемента.

Разницу между полем и отступом можно увидеть на следующем рисунке:

Также просмотрите демо-версию, чтобы лучше понять разницу между этими двумя свойствами.

Посмотреть демо-версию и код

У нас есть три элемента div. Первые два — со свойством HTML margin, а третий — со свойством padding. Расстояние между элементами div — это margin, а пространство между текстом внутри третьего элемента div и линией его границы — это padding.

  • Отступы в CSS — cинтаксис CSS-свойств padding и margin
  • Синтаксис CSS-свойства padding
  • Пример для установки полей и отступов в HTML-списке
  • Демонстрация полей на примере HTML-таблицы
  • Пример использования полей и отступов с элементом form

Синтаксис, который используется для единичного объявления свойства CSS margin:

margin: 50px;

Этот код задает отступы во всех направлениях: отступ сверху CSS, отступ снизу CSS, отступ слева CSS и отступ справа CSS. Если необходимо задать отступы для разных направлений, это можно сделать с помощью следующего сокращенного объявления:

margin: 10px 20px 50px 100px;

Где:

  • 10px — отступ сверху CSS;
  • 20px — отступ справа CSS;
  • 30px — отступ снизу CSS;
  • 40px — отступ слева CSS.

Также можно установить отступ слева CSS и другие направления отдельно:

margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;

Примечание: Можно использовать для определения отступа px, pts, cm и т.д.

Свойство padding можно задать с помощью единичного / сокращенного объявления или используя отдельное объявление, а для каждого направления.

Единичное объявление с одним значением:

padding: 50px;

Для каждого направления одиночным объявлением:

padding: 10px 20px 50px 100px;

Если указаны четыре значения, то порядок их следования такой же, как и для свойства HTML CSS margin.

Для каждого направления в отдельности:

padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;

Во вступительной части я показал свойства margin и padding, используемые в элементе div. В этой демо-версии я создал список с помощью пунктов меню, которые являются ссылками. Список размещается внутри элемента div. Он содержит пункты меню в виде гиперссылок.

Список задается и другими свойствами CSS, но без использования свойств HTML margin и padding он будет выглядеть так:

Посмотреть демо-версию и код

Добавив поля 10px для ссылок внутри <ul>:

padding: 10px;

мы получим следующий вид:

Посмотреть онлайн демо-версию и код

Свойство padding добавило пространство между содержимым и границей каждой ссылки. Укажите отступ величиной в 2 пикселя в классе ссылки, и получите следующий вид:

Посмотреть онлайн демо-версию и код

Весь класс для ссылок внутри элемента <ul> будет следующим:

padding: 10px;
margin: 2px;
text-decoration: none;
color: #fff;
background-color: #DA8119;
display:block;

Ниже приводится пример использования свойства padding в HTML-таблице. Я создал таблицу с несколькими строками.

Для таблицы заданы стили с помощью различных свойств CSS. Сначала посмотрите, как выглядит таблица без применения свойства padding:

Посмотреть демо-версию и код

Добавив поля, мы получим таблицу, которая будет выглядеть следующим образом:

Посмотреть демо-версию и код

Ниже приводится код стилей, которые используются для <td>. Весь код можно увидеть, перейдя по ссылке выше:

padding: 20px;
border: dashed 1px #DF7000;
background: #D0E8AC;
color: #000;

Свойства margin padding HTML также можно применять для элементов формы: текстовых полей, кнопок и т.д.

Свойство padding, примененное к текстовому полю, задает пространство между курсором внутри текстового поля и его границей. margin добавляет отступы между различными текстовыми полями или другими элементами формы.

Чтобы стало понятнее, я создам форму и покажу разницу между полями с использованием свойств margin и padding и без. Первоначальный внешний вид формы без применения свойств margin и padding:

Добавив поля к классу текстовых полей и классу кнопки btn, мы получим форму, выглядящую следующим образом:

Поля для текстовых полей:

padding: 10px;

Поля для кнопки:

padding: 9px 15px;

Посмотреть демо-версию и код

Чтобы увеличить или уменьшить отступы между текстовыми полями, используйте свойство HTML CSS margin. В данной демо-версии я использовал отрицательное значение для уменьшения расстояния между полями.

margin: -3px;

Поля формы будут выглядеть следующим образом:

Посмотреть демо-версию и код

После использования отрицательного значения в HTML margin расстояние между текстовыми полями уменьшилось на 3 пикселя.

Использовав свойство padding, мы увеличили расстояние между курсором внутри текстового поля и линией границы, которое задается другими свойствами. Теперь поле выглядит гораздо лучше.

Для кнопки “Save” мы также применили свойство padding:

padding: 9px 15px;

которое используется для выравнивания текста во всех направлениях.

Дайте знать, что вы думаете по данной теме статьи в комментариях. За комментарии, отклики, дизлайки, подписки, лайки огромное вам спасибо!

Вадим Дворниковавтор-переводчик статьи «CSS padding and margin – Explained with 4 HTML elements»

Как изменить расстояние между блоками сайта? — Вопрос от Юрий Семкин

  • Вопросы
  • Горячие
  • Пользователи
  • Вход/Регистрация

>

Категории вопросов

Задать вопрос +

Основное

  • Вопросы новичков (16341)
  • Платные услуги (2084)
  • Вопросы по uKit (81)

Контент-модули

  • Интернет-магазин (1430)
  • Редактор страниц (236)
  • Новости сайта (497)
  • Каталоги (805)
  • Блог (дневник) (111)
  • Объявления (294)
  • Фотоальбомы (431)
  • Видео (255)
  • Тесты (60)
  • Форум (575)

Продвижение сайта

  • Монетизация сайта (218)
  • Раскрутка сайта (2446)

Управление сайтом

  • Работа с аккаунтом (5288)
  • Поиск по сайту (425)
  • Меню сайта (1754)
  • Домен для сайта (1526)
  • Дизайн сайта (13440)
  • Безопасность сайта (1463)
  • Доп. функции (1304)

Доп. модули

  • SEO-модуль (225)
  • Опросы (62)
  • Гостевая книга (98)
  • Пользователи (431)
  • Почтовые формы (317)
  • Статистика сайта (196)
  • Соц. постинг (212)
  • Мини-чат (91)

Вебмастеру

  • JavaScript и пр. (642)
  • PHP и API на uCoz (233)
  • SMS сервисы (10)
  • Вопросы по Narod. ru (422)
  • Софт для вебмастера (39)

…

html — Как добавить пробел между элементами встроенного блока?

спросил

Изменено 7 лет, 1 месяц назад

Просмотрено 22к раз

Чтобы было ясно, я не хочу, чтобы удалял пространство между элементами встроенного блока — я хочу, чтобы добавлял его.

Я хочу иметь сетку пунктов меню, которые могут иметь 2, 3 или 4 пункта в строке, чего я хотел бы достичь с помощью медиа-запросов.

Как я могу добавить пространство между элементами li, но при этом не иметь полей слева и справа в каждой строке ? (Заполнение не исправит это.) Могу ли я добиться этого, используя только CSS?

 * {
  -webkit-box-sizing: рамка-бокс;
  -moz-box-sizing: рамка-бокс;
  box-sizing: граница-коробка;
  граница: сплошная 1px;
  размер шрифта: 0;
}
#главный {
  максимальная ширина: 450 пикселей;
  поле: 0 авто;
}
.вещь {
  отображение: встроенный блок;
  ширина: 200 пикселей;
}
.элемент изображения {
  ширина: 200 пикселей;
}
.clearfix {
  переполнение: авто;
}
ли {
  тип стиля списка: нет;
} 
 <дел>

  
  • 
    
      <дел>
        Портреты Греции в ее истории кризис
    
  
    • 
  
  
  • 
    
      <дел>
         nyt.com/images/2015/06/23/business/greece-portraits-restauranteur/greece-portraits-restauranteur-mediumThreeByTwo225.jpg" alt="Портреты Греции в ее истории кризис">
    • HTML
    • CSS

    1

    Возможно, это поможет вам

     
<стиль>
* {
  -webkit-box-sizing: рамка-бокс;
  -moz-box-sizing: рамка-бокс;
  box-sizing: граница-коробка;
  граница: сплошная 1px;
  размер шрифта: 0;
}
#главный {
  максимальная ширина: 452 пикселя;
  поле: 0 авто;
}
.вещь {
  отображение: встроенный блок;
  ширина: 150 пикселей;
}
.item1 {
  отображение: встроенный блок;
  ширина: 150 пикселей;
  отступ: 0px 4px;
}
.элемент изображения {
  ширина: 200 пикселей;
}
.clearfix {
  переполнение: авто;
}
ли {
  тип стиля списка: нет;
}

   
   <тело>
   <дел>
 
  • 
    
      <дел>
         jpg" alt="Портреты Греции в ее истории кризис">
    
  
    • 
  
  • 
    
      <дел>
        Портреты Греции в ее истории кризис
    
  
    • 
  
  • 
    
      <дел>
        Портреты Греции в ее истории кризис