Содержание

Как сделать отступ сверху CSS?

Категория: Сайтостроение, Опубликовано: 2017-08-11
Автор:

Приветствую вас, дорогие посетители, на сайте Impuls-Web!

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

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

Навигация по статье:

  • Внешний отступ сверху CSS
  • Внутренний отступ сверху CSS

Внешний отступ сверху CSS

Для задания внешнего верхнего отступа используется CSS-свойство margin-top, значение которого можно задать в px (пикселях), em, % и других доступных в CSS единицах измерения.

В одной из мох прошлых статей я уже рассказывала, как можно использовать свойство

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

Пример использования:

.margin-block{ margin-top:50px; }

.margin-block{

margin-top:50px;

}

Аналогично, для выравнивания блока вы можете использовать свойства margin-left, margin-right, margin-bottom. Так же можно указать свойство margin, и задать для него четыре параметра, по часовой стрелке начиная с верхней стороны, соответственно для каждой из сторон:

margin: 20px 50px 30px 50px;

margin: 20px 50px 30px 50px;

margin: сверху справа снизу слева

Внутренний отступ сверху CSS

В ситуации, когда нам нужно выровнять контент по вертикали, относительно родительского блока мы можем использовать свойство padding-top, которое задает внутренний отступ сверху CSS. Параметры свойства задаются аналогично свойству margin в px, em, % и т.д.

Пример:

.padding-block{ padding-top: 50px; }

.padding-block{

padding-top: 50px;

}

Аналогично свойству

margin, свойство padding можно использовать для задания отступов с других сторон блока по отдельности: padding-left, padding-right, padding-bottom. А так же можно задавать расстояния для всех сторон одновременно:

padding: 20px 50px 30px 50px;

padding: 20px 50px 30px 50px;

В этом случае значения задаются аналогично как и для margin начиная сверху, а дальше по часовой стрелке (справа, снизу, слева)

Используя, в зависимости от ситуации, показанные в статье способы задания отступов сверху CSS-свойствами

margin и padding, вы сможете расположить необходимые вам блоки на странице своего сайта именно так как вам нужно.

Надеюсь, данная статья будет для вас полезна! Не забывайте оставлять комментарии и делиться статьей в соцсетях.
А на сегодня у меня все! Успехов вам и до встречи в следующих статьях!

С уважением Юлия Гусарь

Организация отступов в верстке (margin/padding) / Хабр

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

Ниже перечисленные принципы выполняются в среде позиционирования элементов на странице. В элементах декора тоже выполняются. Но не так категорично.

Основные принципы:

  1. Отступы идут от предыдущего элемента к следующему.
  2. Отступ задается последнему возможному элементу в доме.
  3. Отступы нельзя задавать для независимых элементов ( БЭМ блок ).
  4. У последнего элемента группы, отступ обнуляется (всегда).

Отступы идут от предыдущего элемента к следующему.

margin(ы) задаются от предыдущего элемента к следующему, от первого ко второму, сверху вниз, слева направо.

Это значит.что такие свойства как margin-left и margin-top не используются (не без исключений). С padding все немного наоборот (кроме того, что он используется для, декоративных целей, увеличения области ссылки и т.д.). Когда блоку нужен отступ сверху или слева, он его получает за счет padding-top и padding-left родителя.

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

, блок сам себя не толкает.
Изначально он находится в статическом положении, и получает какое-то воздействие, за счет других.

Отступ задается последнему возможному элементу в доме

margin(ы) задаюся только между соседними элементами дом дерева.

В примере 3 списка, в следующей структуре:

<section>
  <div>
    <div>
      <ul>
        <li><a href="">Далеко-далеко, за словесными.</a></li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
      </ul>
    </div>
  </div>
  <div>...</div>
  <div>...</div>
</section>

Не за счет дочерних элементов, а за счет соседних делается отступ.

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

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

<section>
  <h2>headline in a section of seven words</h2>
</section>

Если взять пример с заголовком, и нужно сделать отступ для заголовка сверху. то последний элементом будет section и для него задается padding-top, margin(ы) которые стоят по дефолту всегда нужно обнулять.

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

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

Отступы нельзя задавать для независимых элементов ( БЭМ блок )

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

Если нужно сделать блоку отступ. Без ущерба это делается с помощью:

  • Наследование через элемент (если вытащить этот блок с элемента, отступа не будет, и его можно будет просто разместить в другом месте).
  • Добавление класса (можно сделать блок элементом).
  • Обертка (как блок, у которого роль, только в позиционировании).
.block__item > .block { margin-right: 10px; }
.block.block__item { margin-right: 10px; }
.block-wrap > .block { margin-right: 10px; }

У последнего элемента группы, отступ обнуляется (всегда)

Возьмем для примера список и изображение.

<ul>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
</ul>
<img src="" alt="">

Это горизонтальное меню и логотип (который почему-то справа).

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

Для последней li отступ обнуляется. И отступ делается между соседними элементами ul и img. О чем говорилось во втором принципе.

Возьмем другой пример:

<aside>
  <div>
    <article>
      <h4>...</h4>
      
      <p>...</p>
      
      <aside>
        <time>10.10.10</time>
      </aside>
    </article>
  </div>
  <div>...</div>
  
  <div>...</div>
</aside>

Интересует нас отступ между новостями, которые задается .blog-preview__item { margin-bottom: 20px; }. Последний margin обнуляется, а нижний отступ делается за счет padding blog-preview. О чем говорилось во втором принципе.

Чаще чем другие псевдоклассы, надо использовать :last-child.

.item:not(:last-child) { 
  margin-bottom: 20px; 
}
// или //
.item {
  // другие стили //
  margin-bottom: 20px; 
  &:last-child {
    margin-bottom: 0;
  }
}
// или margin-top, основная идея здесь, не в направлении маргина, а в отсутствии лишнего //
. item + .item {
  margin-top: 20px;
}
// или //
.item {
  // другие стили //
  & + & {
    margin-top: 20px;
  }
}

Исключения


  • В первую очередь это добавление текстового контента через админку. Здесь отлично справляется подход к отступам заданный браузером. Но этот подход нельзя считать подходящим в обычной верстке как и несколько <br> в коде подряд.

  • «Динамические элементы». Когда элемент появляется после какого-то блока, то он появится со своим отступом.
  • Иногда вертикальные падинги лучше задавать дочерним блокам, нежели всей секции. Если в перспективе, на других страницах в том же месте, это относится ко второму принципу, задавать отступ для последнего возможного, вот иногда секция последний, но не возможный.
  • Отрицательные маргины, auto, padding для контейнера.

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

P. S. Советую ознакомиться с публикацией Кастомный подход для нормализации и сброса стилей (custom-reset.css). И советую использовать css линтеры. И кому интересно, может решить css задачку.

CSS | text-indent Property — GeeksforGeeks

< html >

     < head >

         < title >

             CSS text-indent Property

         0007 Название >

< Стиль >

. SUDO {

.

}

.Geeks {

9

                 text-indent: -5em;

}

.GFG {

Текст-интент: 40%;

}

Стиль >

Head

0008 >

      

     < body >

         < h2 style = "">GeeksforGeeks h2 >

< h3 > text-indent Свойство h3 >

                           9

6

60008 < H3 > Text-Intent: 70px: H3 >

< Div Class = "Sudo">

Prap Prese Class = "sudo">

Набор продуктов

            таких компаний, как Microsoft, Amazon, Adobe

             и т. д. с бесплатной подготовкой к онлайн-размещению

             курс. Курс фокусируется на различных MCQ

, и кодирующий вопрос, который, вероятно, будет задан в

И собеседования и выполните свое предстоящее размещение

Сезон и успешные.

         div >

          

         < h3 >text-indent: -5em: h3 >

         < div class = "geeks">

Подготовка к набору продукта

            на базе таких компаний, как Microsoft, Amazon, Adobe0008

             курс. Курс фокусируется на различных MCQ

, и кодирующий вопрос, который, вероятно, будет задан в

И собеседования и выполните свое предстоящее размещение

Сезон и успешные.

         div >

          

         < h3 >text-indent: 40%: h3 >

         < div class = "gfg">

Подготовка к набору продукта

            на базе таких компаний, как Microsoft, Amazon, Adobe0008

             курс. Курс фокусируется на различных MCQ

, и кодирующий вопрос, который, вероятно, будет задан в

И собеседования и выполните свое предстоящее размещение

Сезон и успешные.

         div >

    

Body >

HTML >

CSS: Адденция и SPECPECTES | CSE 154 Неофициальное руководство по стилю

Отступ

Интервалы и отступы должны быть одинаковыми во всем коде. Многие разработчики предпочитают использовать Отступ в 4 или 2 пробела.

Вот три примера неправильного отступа в CSS:

дел {
 размер шрифта: 18pt;
  цвет: #222222;
}

  картинка {
ширина: 50%;
  }

п {
семейство шрифтов: Helvetica, Arial, без засечек;
размер шрифта: 14pt;
}

Вот несколько примеров хороших отступов в CSS:

дел {
  размер шрифта: 18pt;
  цвет: #222222;
}

картинка {
  ширина: 50%;
}

п {
  семейство шрифтов: Helvetica, Arial, без засечек;
  размер шрифта: 14pt;
}

Форматирование строки

Одна строка на правило

Каждое правило CSS должно быть на отдельной строке. Если правило CSS имеет несколько значений (например, несколько семейств шрифтов), они должны быть в той же строке, что и соответствующее правило.

{цвет: #111111;
    размер шрифта: 16pt;
}

дел {
  цвет: #222222; размер шрифта: 18pt;
}

п {
  семейство шрифтов: Helvetica,
               Ариал,
               без засечек;
}
 
а {
  цвет: #111111;
  размер шрифта: 16pt;
}

дел {
  цвет: #222222;
  размер шрифта: 18pt;
}

п {
  семейство шрифтов: Helvetica, Arial, без засечек;
}
Пустые строки

Поместите пустую строку между каждым селектором CSS. Вы никогда не должны иметь более одного пустая строка подряд.

а {
  цвет: #111111;
  размер шрифта: 16pt;
}


дел {
  цвет: #222222;
  размер шрифта: 18pt;
}
п {
  семейство шрифтов: Helvetica, Arial, без засечек;
}
 
а {
  цвет: #111111;
  размер шрифта: 16pt;
}

дел {
  цвет: #222222;
  размер шрифта: 18pt;
}

п {
  семейство шрифтов: Helvetica, Arial, без засечек;
}

Расстояние

Пробелы

Поместите разрыв строки после { или } и между каждым объявлением свойства.

No related posts.