Html отступы: Отступы | htmlbook.ru

Содержание

margin-left | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
6.0+8.0+1.0+3.5+1.0+1.0+1.0+1.0+

Краткая информация

Версии CSS

Описание

Устанавливает величину отступа от левого края элемента. Отступом является расстояние от внешнего края левой границы текущего элемента до внутренней границы его родительского элемента (рис. 1).

Рис. 1. Отступ от левого края элемента

Синтаксис

margin-left: значение | auto | inherit

Значения

Величину левого отступа можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. Значение может быть как положительным, так и отрицательным числом.

auto
Указывает, что размер отступов будет автоматически рассчитан браузером.
inherit
Наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>margin-left</title>
  <style>
   .layer1 {
    background-color: #D36037; /* Цвет фона */
   }
   .layer2 {
    margin-left: 20%; /* Отступ слева */
    background-color: #ccc; /* Цвет фона */
    padding: 10px; /* Поля вокруг текста */
   }
  </style>
 </head> 
 <body> 
  <div>
   <div>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh 
    euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim 
    ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl 
    ut aliquip ex ea commodo consequat. 
   </div>
  </div>
 </body>
</html>

Результат данного примера показан на рис. 2.

Рис. 2. Применение свойства margin-left

Объектная модель

[window.]document. getElementById(«elementID»).style.marginLeft

Браузеры

Браузер Internet Explorer 6 удваивает значение левого или правого отступа для плавающих элементов, вложенных в родительские элементы. Удваивается тот отступ, который прилегает к стороне родителя. Проблема обычно решается добавлением display: inline для плавающего элемента.

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.

Отступы и поля | htmlbook.ru

Отступы и поля | htmlbook.ru

Темы рецептов

К абзацу (тег <p>) и заголовку (тег <h2>) автоматически добавляется верхний и нижний отступы, которые в сумме и дают большое расстояние между заголовком и текстом. Чтобы уменьшить величину отступа надо явно добавить свойство margin-bottom к селектору h2. Причем можно установить положительное, нулевое или отрицательное значение. Таким способом легко задавать желаемое значение отступа.

Когда требуется установить абзацный отступ, лучше всего использовать стилевое свойство text-indent. Его значение определяет насколько сдвинуть текст первой строки вправо от исходного положения. Ширина текстового блока при этом не меняется и остается исходно заданной. Величину отступа можно указывать в пикселах, процентах или других доступных единицах (пример 1).

Чтобы обнулить отступы и поля у всех элементов на странице, используйте стилевые свойства margin и padding с нулевыми значениями, добавляя их к универсальному селектору *.

При использовании тега <p> автоматически добавляются отступы сверху и снизу от текстового абзаца. Это сделано для того, чтобы визуально отделить один блок текста от следующего. Понятно, что значения отступов, которые заданы по умолчанию, устраивают не всегда, поэтому иногда их приходится уменьшать или увеличивать. Для этого можно использовать универсальное свойство margin, оно определяет отступы со всех сторон абзаца или margin-top для отступа сверху и margin-bottom — для отступа снизу.

При добавлении формы через тег <form> вокруг нее сверху и снизу автоматически добавляются отступы. Чтобы их убрать, используйте стилевое свойство margin с нулевым значением, добавляя его к селектору FORM.

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

О сайте

Помощь

Копирование материалов

Борьба с ошибками

Технологии

Поисковый плагин

Основные разделы

Статьи

Блог

Практикум

Цифровые книги

Форум

HTML

Самоучитель HTML

XHTML

Справочник по HTML

HTML5

CSS

Самоучитель CSS

Справочник по CSS

Рецепты CSS

CSS3

Сайт

Вёрстка

Макеты

Веб-сервер

htmlbook.ru использует хостинг timeweb

© 2002–2021 Влад Мержевич, по всем вопросам пишите по адресу [email protected]

Подпишитесь на материалы сайта по RSS

поля и отступы — учебник CSS

В предыдущей главе мы упоминали о таких свойствах CSS, как margin (поле) и padding (отступ).

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

Создавать промежутки между элементами можно и тем, и другим способом, но если padding – это отступ от содержимого до края блока, то margin – это расстояние от одного блока до другого, межблоковое пространство. На скриншоте показан наглядный пример:

Padding отделяет содержимое от границы блока, а margin создает промежутки между блоками

 

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

Для установки полей или отступов в CSS от каждой стороны элемента существуют следующие свойства:
 

Отступы:

  • padding-top: значение;
  • padding-right: значение;
  • padding-bottom: значение;
  • padding-left: значение;

Поля:

  • margin-top: значение;
  • margin-right: значение;
  • margin-bottom: значение;
  • margin-left: значение;

 

Значения могут быть указаны в любых единицах CSS – px, em, % и т.  д. Пример: margin-top: 15px.

Также существует очень удобная вещь как сокращенная запись margin и padding CSS. Если вам необходимо задать поля или отступы для всех четырех сторон элемента, совсем необязательно записывать свойство для каждой стороны по отдельности. Всё делается проще: для margin и padding можно указывать сразу 1, 2, 3 или 4 значения. От количества значений зависит, как распределяются настройки:

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

-3px), которые иногда бывают весьма полезными.

Схлопывание margin

Представьте ситуацию: два блочных элемента находятся друг над другом и им заданы поля margin. Для верхнего блока установлено значение margin: 60px, а для нижнего – margin: 30px. Логично было бы предположить, что два граничащих поля двух элементов просто соприкоснутся и в итоге промежуток между блоками будет равен 90 пикселям.

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

Расстояние между блоками равно большему из значений

 

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

  • Когда оба значения margin положительные, итоговый размер поля будет равен бóльшему значению.
  • Если одно из значений является отрицательным, то для вычисления размера поля нужно получить сумму значений. Например, при значениях 20px
    и -18px размер поля будет равен:
    20 + (-18) = 20 — 18 = 2 пикселя.
  • Если оба значения отрицательные, сравниваются модули этих чисел и выбирается число, бóльшее по модулю (следовательно, меньшее из отрицательных чисел). Пример: необходимо сравнить значения полей -6px и -8px. Модули сравниваемых чисел равны 6 и 8 соответственно. Отсюда следует, что 6 8, то есть, -6 > -8. Итоговый размер поля равен -8 пикселей.
  • В случае, когда значения указаны в разных единицах CSS, они приводятся к одной, после чего сравниваются и выбирается бóльшее значение.
  • Размер margin для дочерних элементов определяется еще более интересно: если у потомка поле margin больше, чем у родителя, то приоритет отдается ему. В этом случае размеры верхнего и нижнего полей родителя станут такими, как задано у потомка. При этом расстояния между родителем и потомком не будет.

Далее в учебнике: блочные и строчные элементы HTML, свойство display CSS.

Внешние и внутренние отступы | bookhtml.ru

Продолжаем изучение уроков CSS. В этом уроке мы затронем тоже очень важную тему — тему отступов.

Припомним основное: каждый элемент html-страницы — это индивидуальный блок, имеющий свои границы (рамки).

Для примера возьмем абзац из предыдущего урока и в стилях пропишем ему ширину в 500px:

Пример:

.ramka {

border-bottom:2px solid #000000;

border-left:1px dotted green;

border-right:1px dotted green;

border-top:1px solid gray;

width:500px;

}

 

Наш абзац

<p>Текст абзаца</p>

станет шириной в 500px. Как мы видим, абзац такой же блочный элемент.

Теперь перейдем непосредственно к отступам. Отступы есть внешние и внутренние.

Внешний отступ — расстояние от границы элемента страницы (border) до соседнего элемента.

Внутренний отступ — расстояние от границы элемента (border) до содержимого этого элемента (например текста).

За величину внешнего отступа отвечает свойство margin

margin-top — верхний внешний отступ

margin-right — правый внешний отступ

margin-bottom — нижний внешний отступ

margin-left — левый внешний отступ

margin — внешний отступ со всех сторон (краткая запись)

Пример:

. ramka {

border-bottom:2px solid #000000;

border-left:1px dotted green;

border-right:1px dotted green;

border-top:1px solid gray;

margin-top:20px;

margin-right:30px;

margin-bottom:40px;

margin-left: 10px;

}


Для сокращения записи можно использовать краткую запись свойства margin:

Пример:

.ramka {

border-bottom:2px solid #000000;

border-left:1px dotted green;

border-right:1px dotted green;

border-top:1px solid gray;

margin:20px 30px 40px 10px;

}


Краткая запись свойства margin:

margin:20px 55px 70px 100px;

  • верхний отступ равен 20px
  • правый отступ равен 55px
  • нижний отступ равен 70px
  • левый отступ равен 100px

margin:20px 55px 70px;

  • верхний отступ равен 20px
  • правый и левый отступы равны 55px
  • нижний отступ равен 70px

margin:20px 55px;

  • верхний и нижний отступы равны 20px
  • правый и левый отступы равны 55px

margin:15px;

  • все отступы равны 15px

За величину внутреннего отступа отвечает свойство padding


padding-top — верхний внутренний отступ

padding-right — правый внутренний отступ

padding-bottom — нижний внутренний отступ

padding-left — левый внутренний отступ

padding — внутренний отступ со всех сторон (краткая запись)

Пример:

. ramka {

border-bottom:2px solid #000000;

border-left:1px dotted green;

border-right:1px dotted green;

border-top:1px solid gray;

padding-top:20px;

padding-right:30px;

padding-bottom:40px;

padding-left: 10px;

}

Как и свойство margin свойство padding можно прописать краткой записью:

Пример:

.ramka {

border-bottom:2px solid #000000;

border-left:1px dotted green;

border-right:1px dotted green;

border-top:1px solid gray;

padding:20px 30px 40px 10px;

}

Краткая запись свойства padding

padding:20px 55px 70px 100px;

  • верхний отступ равен 20px
  • правый отступ равен 55px
  • нижний отступ равен 70px
  • левый отступ равен 100px

padding:20px 55px 70px;

  • верхний отступ равен 20px
  • правый и левый отступы равны 55px
  • нижний отступ равен 70px

padding:20px 55px;

  • верхний и нижний отступы равны 20px
  • правый и левый отступы равны 55px

padding:15px;

  • все отступы равны 15px

4.

Отступы · Неожиданный HTML

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

Padding – «внутренний» отступ(выводится внутри границы). На padding распространяется цвет фона контента. Ширина padding’a добавляется к ширине и высоте контента.

Заметим, что цвет паддинга как и в случае с листом бумаги передается ему от контента.

У нас есть 4ре направления, по которым мы должны задать padding. И у нас есть множество способов как это сделать.

Вариант, когда мы задаем все 4ре направления по отдельности. Чтобы запомнить порядок задания достаточно знать, что направления идут по часовой стрелке, от «12ти» часов.

padding: 25px 50px 75px 100px;

верхний padding равен 25px
padding справа равен 50px
bottom снизу равен 75px
padding слева равен 100px

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

padding: 25px 50px 75px;

верхний padding равен 25px
padding’и справа и слева равны 50px
нижний padding равен 75px

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

padding: 25px 50px;

верхний и нижний padding’и равны 25px
правые и левые paddings равны 50px

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

padding: 25px;

Отступы со всех сторон равны 25px

Можно задавать padding отдельно по направлениям

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

padding-bottom — устанавливает padding снизу

padding-left — устанавливает padding слева

padding-right — устанавливает padding справа

padding-top — устанавливает padding сверху

Margin

margin – внешний отступ(делает отступ снаружи границы).

У margin’a нет цвета, margin всегда прозрачен.

Правила использования margin’a, аналогичны padding’у – просто слово padding меняется на margin

margin:0; для body

margin:0px; для body убирает белые отступы по краям документа

body {
    margin:0;
}

margin:0 auto

margin:0 auto; – выравнивает блок по центру, по ширине. Пример ниже выравнивает красный div с классом block по центру экрана.

div.block {
    width:300px;
    height:200px;
    background-color:red;
    margin:0 auto;
}

Границы

border — это граница блока. В отличии от margin и padding мы можем задать цвет для border’a. Также как в случае с margin и padding ширина border’a добавляется к ширине блока.

Мы можем написать все свойства границы сразу, задав ширину, стиль (solid — это непрерывная граница), цвет.

border: 3px solid black;

А можем задавать их по отдельности:

border-width:3px; // ширина
border-style:solid; // стиль
border-color:red; // цвет

Мы можем задавать границу отдельно по направлениям

border-top:1px dotted red; //сверху граница красными точками
border-bottom-style: dashed;

Можно задавать border-width по всем направлениям

border-width: 2px 10px 4px 20px;

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

.semi_block {
    border:10px solid orange;
    border-bottom:0px solid orange;
}

То есть мы окружаем блок границей со всех сторон, а потом убираем ее снизу, выставляя границу толщиной 0

outline – граница, которая возникает вокруг объекта, при его выборе курсором. Синтаксис outline аналогичен border’у. Например:

outline:1px dotted grey;

Для чего же кроме border нам может понадобиться еще и outline!? Во-первых, мы можем отключить выделение у объекта, которое в отличии от границы не скругляется. Во-вторых outline — очень удобная вещь при отладки верстки, так как outline не сдвигает верстку, а накладывается на нее.

Полезное чтиво

  1. Расстановка полей и отступов в CSS https://habrahabr.ru/company/netcracker/blog/281008/

  2. Использование теории близости для расстановки отступов https://spark.ru/startup/logo/blog/28397/teoriya-blizosti-glavnoe-pravilo-dizajna-kotoroe-rasstavlyaet-vse-po-mestam?from=vc

  3. Модификация отступов у формы https://hsto. org/files/b94/832/419/b94832419cf54ae7be1193ff2fedd934.gif

  4. Проблемы со схлопывающимися margin’ами https://cmichel.io/css-margin-top-not-working

Практика:

  1. Сделать один блок под другим. Между ними сделать расстояние высотой в один блок. Оба блока должны быть выровнены по центру по горизонтали

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

  3. Сделать вот такую конструкцию и выровнять ее по центру


  4. Необходимо сделать верстку следующего макета. Синие блоки резиновые(растягиваются на весь экран), серый блок фиксированный по ширине и находится по середине(при любом размере окна браузера)

  5. Три ячейки одна на другой с границами. Обратите внимание, что граница везде одинарная

  6. Сделать меню в шапке сайта. Все слова меню должны быть по центру «шапки» по вертикали и иметь одинаковые отступы справа и слева.

  7. Макет Центральная область(серые блоки) должна быть фиксированной, а синяя полоска резиновой.

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

Учебник CSS для начинающих. Поля и отступы.

Глава 8

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

Давайте разберемся в этих понятиях..

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

Отступом (padding) — Называют расстояние от внутренней границы элемента до его содержания текста, картинок таблиц. .

На рисунке наглядно показаны эти расстояния, а так же место занимаемое бордюром (border) про него тоже не следует забывать.

Расстояния margin и padding указываются:

  • px — В пикселях или любых других допустимых CSS единицах измерения.
  • % — В процентах.
  • auto — Размер полей и отступов автоматически рассчитывается браузером.

Давайте попробуем сделать тоже самое, что показано на рисунке с помощью блоков <div> и свойств CSS.

Пример:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Поля и отступы</title>
<style type=»text/css»>
div.block1 {
width: 260px;
background-color: #c5ffa0;
border: 2px solid #a68754
}
div. block2 {
background-color: #c0e4ff;
border: 8px solid #a68754;
margin: 40px;
padding: 20px
}
</style>
</head>
<body>
<div>
<div>
<samp>Осмысливая мысли в смысле смысла, есть смысл помыслить о немыслимом!</samp>
</div>
</div>
</body>
</html>

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

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

Вот примеры:

margin: 5px;одно значение.
Одно значение — Поля одинаковые со всех сторон.

margin: 5px 40px;два значения.
Первое значение — Устанавливает поля от верхней и нижней границ.
Второе значение — Устанавливает поля от левой и правой границ элемента.

margin: 5px 40px 20px; — три значения.
Первое значение — Устанавливает поле от верхней границы элемента.
Второе значение — Устанавливает поля от левой и правой границ элемента.
Третье значение — Устанавливает поле от нижней границы элемента.

margin: 5px 40px 20px 1px; четыре значения.
Первое значение — Устанавливает поле от верхней границы элемента.
Второе значение — Устанавливает поле от правой границы элемента.
Третье значение — Устанавливает поле от нижней границы элемента.
Четвёртое значение — Устанавливает поле от левой границы элемента.

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

Пример:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Поля и отступы</title>
<style type=»text/css»>
div.block1 {
width: 260px;
background-color: #c5ffa0;
border: 2px solid #a68754
}
div.block2 {
background-color: #c0e4ff;
border: 2px solid #a68754;
margin: 20px 5px 20px 40px;
padding: 5px 25px
}
</style>
</head>
<body>
<div>
<div>
<samp>Осмысливая мысли в смысле смысла, есть смысл помыслить о немыслимом!</samp>
</div>
<div>
<samp>Мало кто знает, как много надо знать, для того чтобы знать, как мало мы знаем!</samp>
</div>
</div>
</body>
</html>

Свойства CSS margin и padding являются базовыми и имеют ряд дочерних свойств.

У margin зто:

  • margin-top — Поле от верхней границы элемента родителя,
  • margin-left — Поле от левой границы элемента родителя,
  • margin-right — Поле от правой границы элемента родителя,
  • margin-bottom — Поле от нижней границы элемента родителя.

И у padding соответственно:

  • padding-top — Отступ от верхней границы элемента до его содержания,
  • padding-left — Отступ от левой границы элемента до его содержания,
  • padding-right — Отступ от правой границы элемента до его содержания,
  • padding-bottom — Отступ от нижней границы элемента до его содержания.

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

Пример:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Поля и отступы</title>
</head>
<body>
<div>
<div>
<samp>Осмысливая мысли в смысле смысла, есть смысл помыслить о немыслимом!</samp>
</div>
<br>
<div>
<samp>Мало кто знает, как много надо знать, для того чтобы знать, как мало мы знаем!</samp>
</div>
</div>
</body>
</html>

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

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

  • Соблюдайте правила пропорциональности и соизмеримости полей и отступов как для отдельно взятого элемента, так и для всей страницы (композиции элементов) целиком.

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



Организация отступов в верстке (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 задачку.

HTML: отступы и интервалы | CSE 154 Неофициальное руководство по стилю

Отступ

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

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

Я абзац!

Я еще один абзац!

Я заголовок внутри абзаца!

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

Я абзац!

Я еще один абзац!

Я заголовок внутри абзаца!

Размещайте разрыв строки после каждого элемента блока.Не размещайте более одного блочного элемента на та же линия.

Привет, как дела

У меня все хорошо

Здравствуйте, как дела

Я в порядке

Вложенные метки

Закройте теги в порядке, обратном их открытию.

Всегда вкладывать каждый встроенный элемент внутрь блочного элемента.
Например, не помещайте тег прямо внутри кузов ; вместо этого поместите его внутрь p или li или другой элемент блочного уровня.

часто используемых тегов HTML | Храм ITS

Предоставляет введение в основы кодирования HTML.

HTML-теги

HTML-код Образец

Заголовок 1

Заголовок 2

Заголовок 2

Заголовок 3

Заголовок 3

Заголовок 4
Заголовок 4
Заголовок 5
Заголовок 5
Заголовок 6
Заголовок 6

HTML-код Образец
полужирный жирный
подчеркивание подчеркивание
курсив курсив

HTML-код Образец

ваш текст

ваш текст

ваш текст

ваш текст

ваш текст

ваш текст

HTML-код Образец

  1. Первая строка
  2. Вторая строка
  1. Первый ряд
  2. Второй ряд

HTML-код Образец

  • Первая строка
  • Вторая строка

HTML-код Образец

Срок
Описание
Срок
Описание

HTML-код Образец

<РАЗМЕР КАДРА = 6 ШИРИНА = 50%>

HTML-код

Описание

Разрыв абзаца

Принудительный перенос строки

HTML-код Образец
Вот какой-то текст.

Вот одна строка текста с отступом.

Вот еще одна строка текста с отступом.
Вот какой-то текст.

Вот одна строка текста с отступом.
Вот еще одна строка текста с отступом.

HTML-код Образец
описание

Например:
CNN

CNN

HTML-код Образец
Название раздела

Например:
Введение

Введение

HTML-код Образец
Назначение

Например:
Введение

Введение

HTML форматирование | Руководство по стилю документации для разработчиков Google

Ключевой момент: Следуйте стандартному HTML и Рекомендации по форматированию CSS.

Следуйте HTML / CSS от Google Гид по стилю. Исключение: не пропускайте необязательные элементы.

В частности, ниже приведены некоторые основные рекомендации из этого руководства по стилю. которые обычно применимы и к другим исходным файлам документации (например, YAML и Markdown):

  • Не используйте табуляцию для отступа текста; используйте только пробелы. Другой текст редакторы по-разному интерпретируют вкладки, а некоторые функции Markdown ожидают пробелов а не вкладки.
  • Отступ двумя пробелами на уровень отступа.
  • Используйте строчные буквы для элементов и атрибутов.
  • Не оставляйте конечные пробелы в конце строки (кроме необходимо для Markdown).

Длина линии

Разрыв строки из 80 символов, за исключением следующих случаев:

  • Теги метаданных в верхней части файлов (например, page.metaDescription ) должны быть все в одной строке, поэтому эти строки могут быть сколь угодно длинными.
  • Если URL-адрес в ссылке имеет разрыв строки, ссылка не будет работать.Если URL-адрес длиннее 80 символов (довольно часто), вы застряли на нем. В таком случае, поместите URL-адрес в отдельную строку с атрибутом href , чтобы сделать его легче просматривать текст до и после, как показано в следующем примере:
 Дополнительную информацию можно найти в
 его биография.  

Фрагменты кода прерывания (в блоках

 ) из 80 символов: 

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

Online HTML Beautifier - HTML Formatter

Завершить скрипт и стиль новой строкой?

Использовать стиль списка с запятой?

Обнаружить упаковщики и обфускаторы?

Сохранить отступ в массиве?

Разрыв строк в связанных методах?

Пробел перед условным: "if (x)" / "if (x)"

Неэкранировать печатные символы, закодированные как \ xNN или \ uNNNN?

Использовать удобные для JSLint настройки форматирования?

Сделать отступ в разделах и ?

Отступ с HTML

Проблема
"Как сделать отступ в HTML?"
Я вижу, что этот вопрос довольно часто задают на различных форумах, которые я часто посещаю. Вероятно, вопрос должен быть таким:
"Как мне сделать надежно отступом в HTML? "
Ответ не такой, как хотелось бы большинству авторов. Естественное поведение HTML в наиболее распространенных браузерах - это сворачивание нескольких пробелов в HTML-коде. контент в единое пространство. Как же тогда автор может сделать надежный отступ?

У ВСЕХ методов, доступных для создания контента, есть потенциальные недостатки. который не выровнен по левому краю относительно области просмотра (обычное значение по умолчанию в браузеры.) Ни одно из решений не будет работать во ВСЕХ браузерах, поэтому вы должны решить, какой метод будет работать лучше всего с учетом возможностей вашего ожидаемого читаемость и взвешивание потенциальной потери удобочитаемости для некоторых пользователей.

Примечание: Джим Барчук создал отличную страницу по этой теме, которую вы можете хочу проверить называется "Глупый Уловки с отступом HTML ». Он посвящен исследованию актуальных левых размеры / значения полей и отступов, используемые различными браузерами (в том числе исследовал на этих страницах.)

Возможные решения



Что: & nbsp; или & # 160;
Поддержка (& # 160;): [ IE1 | M1 | N1 | O2.1 ]
Поддержка (& nbsp;): [ IE2 | M2A8 | N1.1 | O2.1 ]
Как:
Браузеры обычно обрабатывают несколько последовательных пробелов и / или символов возврата каретки как единое пространство.В случае неразрывных пробелов (& nbsp; или & # 160;) браузеры обычно учитывают несколько последовательных вхождений как есть без сворачивая в единое пространство.
Плюсы:
  • Обычно работает в большинстве браузеров
  • Никаких HTML-структур не требуется для достижения отступа
  • Практически ВСЕ браузеры понимают & # 160;
  • Автор может грубо изменить размер отступа, используя желаемое количество несколько & nbsp; (или & # 160;) сущности.
Минусы:
  • Работает только для одной строки отступа - при переносе возвращается на предыдущий уровень отступа.
  • Не ВСЕ браузеры отображают несколько & nbsp; вхождения как есть. Некоторые браузеры сворачивают это до одного пробела.
  • Некоторые старые браузеры не поддерживают & nbsp; названный объект
  • Автор не может гарантировать точный размер отступа (зависит от шрифта). размер, платформа и разрешение просмотра, размер пространства может варьироваться.)

Что:
      
Поддержка: [ IE1 | M1 | N1 | O2.1 ]
Как:
Тег PRE сохраняет ВСЕ пробелы, возврат каретки и перевод строки "как есть" из исходного исходного кода HTML. Предустановленный макет таким образом может быть создан.
Плюсы:
  • Большинство ВСЕ браузеров поддерживают эту функцию, даже текстовые браузеры.
  • Может управлять отступом для нескольких строк текста.
  • Поддерживается в HTML 2.0 - его поддерживают старые браузеры.
Минусы:
  • Форматирование PRE обычно применяет к тексту шрифт фиксированной ширины. для достижения желаемого фиксированного внешнего вида.
  • Разрыв строк всегда сохраняется (может быть нежелательным побочным эффектом).
  • PRE - это структура форматирования блока, и всегда вставляется перенос строки до и после конструкции.Размер интервала перед и после того, как блокировка не может быть гарантирована от браузера к браузеру.

Что: <Цитата>
Поддержка: [ IE1 | M1 | N1 | O2.1 ]
Как:
Большинство браузеров отображают содержимое отрывка BLOCKQUOTE с отступом.
Плюсы:
  • Может размещать блоки BLOCKQUOTE для создания более глубоких отступов.
  • Большинство браузеров используют отступ в структурах BLOCKQUOTE.
  • Поддерживается в HTML 2.0 - его поддерживают старые браузеры.
Минусы:
  • Некоторые браузеры безоговорочно применяют курсив к BLOCKQUOTE структуры, а также отступ.
  • Автор не может контролировать размер отступа.
  • BLOCKQUOTE - это структура форматирования блока, и разрыв строки всегда вставлены до и после конструкции.Размер интервала до и после блокировки не может быть гарантирована от браузера к браузеру.
  • HTML-определения НЕ ТРЕБУЮТ, чтобы браузер использовал отступ для BLOCKQUOTE конструкции.

Что: <Пробел>
Поддержка: [IE | M | N3B5-6.2 | O]
Как:
Netscape создал тег специально с целью управления пробел в HTML-документе.Автор может создавать только горизонтальные, только по вертикали или блокировать пробелы с помощью этого тега.
Плюсы:
  • Предоставляет на уровне пикселей управление размером желаемого интервала.
  • Тег специально создан для управления желаемым отступом свойство.
  • Этот метод также позволяет создавать плавающие элементы интервала.
Минусы:
  • Тег, специфичный для Netscape, поддерживается только в некоторых версиях, поэтому он ОЧЕНЬ ограниченная поддержка.Также в настоящее время его нет ни в одном HTML. стандартным, и никогда не будет (больше контроля возможно с Таблицы стилей сейчас.)
  • В структуре SPACER нет ничего обратно совместимого с допускать постепенную деградацию в не поддерживающих браузерах.
  • Этот элемент больше не поддерживается в текущих версиях Netscape.

Что:
Поддержка: [ IE1 | M1 | N1 | O2.1 ]
Как:
Термин DD в списке определений обычно имеет отступ в большинстве браузеров.
Плюсы:
  • Большинство браузеров выделяют термины DD в структурах DL.
  • Поддерживается в HTML 2.0 - старые браузеры будут поддерживать его.
Минусы:
  • Некоторые браузеры МОГУТ размещать термин DD в той же строке, что и предыдущий срок DT.
  • Спецификации HTML рекомендуют, чтобы термин DD не существовал без связанного с ним термина DT, но это почти никогда не требуется в браузерах.
  • Размер отступа статичен и не может быть изменен - ​​Internet Explorer Размер отступа примерно вдвое меньше размера отступа в Netscape и Mosaic.

Что:
    ,
      Поддержка: [ IE1 | M1 | N1 | O2.1 ]
      Как:
Можно использовать список, содержащий структуру, без необходимые элементы списка (LI) для достижения отступа в нескольких браузерах.
Плюсы:
  • Internet Explorer, Mosaic, Netscape и Opera имеют отступы поведение с этим HTML.
Минусы:
  • Строго говоря, этот HTML недействителен по отношению к установленным стандарты.Всякий раз, когда вы используете недопустимый HTML, конечный результат НЕ может быть гарантировано. Этот метод не следует использовать.
    [Примечание: можно утверждать, что используя только структуру списка, такую ​​как элемент заголовка списка (LH) существующий только в черновике HTML 3.0 с истекшим сроком действия, будет экземпляром, где такое поведение может сойти с рук ... тем не менее, синтаксис вроде LH устаревшая разметка и не рекомендуется.]

Что:
Поддержка: [ IE1 | M1 | N1 | O2.1 ]
Как:
Использование прозрачного изображения желаемой ширины отступа или используя небольшой (1 X 1 пиксель, будет достаточно, чтобы сохранить время загрузки минимальное) прозрачное изображение с явным размером ширины позволяет определение желаемой области белого пространства.
Плюсы:
  • Позволяет контролировать отступы на уровне пикселей.
  • Этот метод также позволяет создавать плавающие элементы интервала.
  • Существенная деградация может произойти при использовании атрибута ALT - браузеры часто сохранить несколько пробелов в его отображении.
  • Большинство графических браузеров поддерживают вставку изображений.
Минусы:
  • Текстовые браузеры не смогут отображать желаемую графику отступ.
  • Атрибут ALT тега изображения может сворачиваться несколько последовательных пробелы к одному.
  • Дополнительный запрос загрузки и время, необходимое для загрузки изображения.
  • Отступает только одна строка текста, если не более поздняя используются теги / атрибуты (таблицы или плавающие атрибуты IMG ALIGN.)
  • Браузеры, которые поддерживают изображения, но не поддерживают прозрачный изображения могут отображать цветное изображение в запрошенном пространстве отступа.

Что: Таблицы
Поддержка: [ IE2 | M2A8 | N1.1 | O2.1 ]
Как:
Использование первого столбца таблицы или первой ячейки строки для отступ управления может быть довольно успешным. Многие методы могут быть используется для определения размера этого первого столбца: прозрачные изображения или неразрывные пробелы в содержимом ячейки или явные объявления атрибута WIDTH для определений ячеек.
Плюсы:
  • Может управлять первой строкой или целыми блоками текста.
  • Позволяет управлять размером отступа на уровне пикселей.
  • С помощью таблиц возможно появление сложных отступов (Атрибуты COLSPAN и ROWSPAN позволяют еще больше возможности отображения.)
  • Методы внутри ячейки, используемые для создания отступов (прозрачные изображения и неразрывные пробелы) ухудшаются в браузерах, которые не разбираться в таблицах.
  • Почти все браузеры теперь поддерживают таблицы
Минусы:
  • Исторически таблицы не всегда поддерживались.Очень старые браузеры вряд ли их поддерживают.
  • Браузеры, не поддерживающие вложенные таблицы, могут не отображать вложенные содержание хорошо.
  • Использование механизмов структурирования таблиц для управления размером отступа (например, атрибуты WIDTH) плохо работают в браузерах, которые не понимаю таблиц.
  • Для создания структур таблиц требуется больше HTML-тегов - это может вызвать более длительное время загрузки в отличие от некоторых других методов создания отступов.

Что: Каскадный Таблицы стилей [-> Index DOT Css]
Поддержка: [ IE3B1 | M | N4B2 | O3.5 ]
Как:
Использование свойств полей каскадных таблиц стилей и / или заполнения на большинство ЛЮБОЙ HTML допускает отступы с любой стороны элемент - даже отрицательные значения с полями.
Плюсы:
  • Для большинства элементов возможна более высокая степень контроля, чем для любым другим способом.
  • Информация о рендеринге может быть прикреплена к элементам HTML без потеря исходного смыслового значения (хорошая обратная совместимость).
Минусы:
  • Старые браузеры никогда не поддерживают каскадные таблицы стилей.Новее браузеры DO поддерживают CSS с разной степенью точности.

Выводы


Из распространенных методов, упомянутых здесь, только некоторые действительно хорошо работают со многими. браузеры. Главный вопрос, который вы должны задать, когда хотите сделать отступ: "Ухудшается ли метод в не поддерживающих браузерах?" В после этого ответ должен быть довольно простым. Чтобы помочь, вот краткое изложение:
Использование приветствуется Работает нормально в некоторых случаях
или в большинстве случаев
Использование не рекомендуется
  • Каскадные таблицы стилей
  • Списки определений
  • Изображения
  • Столы
  • Неразрывное расстояние
  • Предварительно отформатированный текст
  • Цитаты
  • РАСПОРНЫЙ элемент
  • Плохие структуры списка

Создание выступов с помощью HTML и CSS

Несмотря на то, что мнения о роли выступов в цифровую эпоху после печати расходятся, время от времени вам может понадобиться добавить выступы для таких вещей, как ссылки APA, в материалы вашего онлайн-курса.К сожалению, редакторы WYSIWYG («Что видишь, то и получаешь») во многих системах управления обучением не дают вам возможности добавлять выступающие отступы, кроме как путем создания их вручную в HTML и / или CSS.

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

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

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

Пример выступа

Lorem ipsum dolor sit amet, conctetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud упражнение ullamco labouris nisi ut aliquip ex ea Commodo Conquat. Duis aute irure dolor в репрехендерит в сладострастном velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, загорелся in culpa qui officia deserunt mollit anim id est Laborum.

Как видите, в этом примере первая строка текста не имеет отступа, но последующие строки имеют отступ. Как упоминалось выше, выступающие отступы технически являются частью правильного стиля APA для ссылок на сноски, как показано здесь:

Хотя, строго говоря, выступающие отступы являются частью правильного стиля APA для ссылок на сноски, стоит отметить, что использование выступов часто считается ненужным для ссылок на сноски, появляющихся в Интернете, а не в печатных.Учитывая отход от висячих отступов для таких вещей, как ссылки на сноски в онлайн-среде, реальный вопрос может заключаться не в , как добавить висячие отступы в ваш контент, а в том, действительно ли они необходимы для целей вашего контента в первую очередь . Тем не менее, давайте рассмотрим два способа добавления выступов.

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

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

HTML для ссылок APA с выступами

Отображается в браузере как:

Армбрехт, Том.(2018). Преодоление препятствий (текста): создание привлекательных страниц с контентом. ObjectLessons . Получено с https://object-lessons.com/getting-over-stumbling-blocks-of-text-creating-engaging-content-pages/

Фрулинг, Закари Р. (2018). Основы HTML для учебных дизайнеров. ObjectLessons . Получено с https://object-lessons.com/html-basics-for-instructional-designers/

Armbrecht, Tom.(2018). Преодоление препятствий (текста): создание привлекательных страниц с контентом. Уроки по объектам . Получено с https://object-lessons.com/getting-over-stumbling-blocks-of-text-creating-engaging-content-pages/

.

Фрулинг, Закари Р. (2018). Основы HTML для учебных дизайнеров. Уроки по объектам . Получено с https://object-lessons.com/html-basics-for-instructional-designers/

.

В этом примере начальный тег

содержит следующую информацию о стиле в качестве атрибутов:

Значение атрибута стиля «padding-left: 36px» увеличивает отступ всего абзаца на 36 пикселей.А значение атрибута стиля «text-indent: -36px» сдвигает первую строку абзаца влево на 36 пикселей (отсюда отрицательное значение -36px). Вы можете легко изменить степень отступа, изменив значения этих двух чисел.

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

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

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

Для добавления выступов к абзацам или ссылкам APA с помощью HTML и CSS можно использовать следующие шаги:

Шаг 1: Добавьте новый класс (например, «apa-reference») к тегам начального абзаца для всех элементов, для которых потребуется выступающий отступ, как показано в следующем примере.

Теги абзаца с классом apa-reference

Армбрехт, Том.(2018). Преодоление препятствий (текста): создание привлекательных страниц с контентом. ObjectLessons . Получено с https://object-lessons.com/getting-over-stumbling-blocks-of-text-creating-engaging-content-pages/

Фрулинг, Закари Р. (2018). Основы HTML для учебных дизайнеров. ObjectLessons . Получено с https://object-lessons.com/html-basics-for-instructional-designers/

Шаг 2: Добавьте блок стиля для класса «apa-reference» в CSS для вашего содержимого и добавьте атрибуты стиля для выступающего отступа, как показано ниже.

CSS для класса «apa-reference» со стилем для выступающего отступа

.apa-reference {
padding-left: 36px
text-indent: -36px
}

В этом фрагменте кода CSS говорится, что любой элемент HTML, попадающий в класс «apa-reference», должен иметь висящий отступ: весь абзац будет сдвинут вправо на 36 пикселей, но первая строка будет сдвинута назад. влево на 36 пикселей.(Точка перед «apa-reference» указывает, что этот блок CSS относится к классу , называемому «apa-reference», а не к тегу .)

Преимущество совместного HTML / CSS метода добавления выступов заключается в том, что один и тот же стиль может применяться к нескольким тегам с классом «apa-reference» и может быть изменен глобально в одном месте без дальнейшего изменения HTML. для конкретных абзацев или ссылок на сноски. Однако недостатком этого метода является то, что у вас должно быть достаточно возможностей для работы с CSS, чтобы иметь возможность найти, где находится информация CSS для вашего контента, и иметь возможность изменять ее, добавляя соответствующую информацию о стилях, показанную выше.

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

Присоединяйтесь к Resilient Educator

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

Присоединяйтесь к Resilient Educator

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

Присоединиться

Возможно, вы прочитаете

Теги: ссылки APA, CSS, избранные, сноски, выступающие отступы, HTML, HTML-теги, учебный дизайн

Согласованный отступ списка - CSS: каскадные таблицы стилей

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

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

Сначала мы рассматриваем один чистый элемент списка. Этот элемент списка не имеет маркера (также известного как «маркер») и еще не является частью самого списка. Он одиноко висит в пустоте, простой и без украшений, как показано на Рисунке 1.

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

Теперь мы помещаем их в родительский элемент; в этом случае мы заключим их в неупорядоченный список (т.е.,

    ). Согласно блочной модели CSS, поля элементов списка должны отображаться в области содержимого родительского элемента. Поскольку у этого родителя еще нет отступов или полей, мы получаем ситуацию, показанную на рисунке 3.

    Здесь пунктирная синяя граница показывает края области содержимого элемента

      . Поскольку у нас нет отступов для элемента
        , его содержимое плотно обтекает три элемента списка.

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

        Визуально маркеры находятся за пределами области содержимого

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

            Вот почему в каждом браузере, кроме Internet Explorer для Windows, маркеры размещаются за пределами любой границы, установленной для элемента

          • , при условии, что значение list-style-position равно за пределами . Если он изменяется на внутри , тогда маркеры переносятся внутри содержимого
          • , как если бы они были встроенным блоком, размещенным в самом начале
          • .

            Итак, как все это будет отражено в документе? На данный момент у нас есть ситуация, аналогичная этим стилям:

              ul, li {margin-left: 0; padding-left: 0;}  

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

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

            1. Дайте каждому элементу
            2. левое поле.
            3. Дайте элементу
                левое поле.
              • Придайте элементу
                  отступ слева.

            Как выяснилось, первым вариантом никто не воспользовался. Второй вариант использовали Internet Explorer для Windows и Macintosh и Opera.Третий вариант был принят Gecko и, соответственно, всеми браузерами, которые его встраивают.

            Давайте на мгновение рассмотрим два подхода. В Internet Explorer и Opera списки имеют отступ, устанавливая левое поле в 40 пикселей в элементе

              . Если мы применим цвет фона к элементу
                и оставим элемент списка и границы
                  на месте, мы получим результат, показанный на рисунке 5.

                  Gecko, с другой стороны, устанавливает левый отступ из 40 пикселей для элемента

                    , поэтому, учитывая те же стили, которые использовались для создания рисунка 5, загрузка примера в браузер на основе Gecko дает us Рисунок 6.

                    Как мы видим, маркеры остаются прикрепленными к элементам

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

                        Вскипятите все, и у нас остается следующее: если вы хотите согласованный рендеринг списков между Gecko, Internet Explorer и Opera, вам нужно установить как левое поле, так и левое отступление < ul> элемент.Для этих целей мы можем полностью игнорировать

                      • . Если вы хотите воспроизвести отображение по умолчанию в Netscape 6.x, вы пишете:

                          ul {margin-left: 0; padding-left: 40px;}  

                        Если вас больше интересует модель Internet Explorer / Opera, то:

                          ul {margin-left: 40px; padding-left: 0;}  

                        Конечно, вы можете ввести свои собственные предпочтительные значения. Установите оба значения на 1,25em , если хотите - нет причин, по которым вы должны придерживаться пиксельного отступа.Если вы хотите сбросить списки, чтобы не было отступов, вам все равно нужно обнулить как отступы, так и поля:

                          ul {margin-left: 0; padding-left: 0;}  

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *