Как изменить расстояние между абзацами текста?
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Задача
Изменить расстояние между абзацами текста создаваемых с помощью тега <p>.
Решение
При использовании тега <p> автоматически добавляются отступы сверху и снизу от текстового абзаца. Это сделано для того, чтобы визуально отделить один блок текста от следующего. Понятно, что значения отступов, которые заданы по умолчанию, устраивают не всегда, поэтому иногда их приходится уменьшать или увеличивать. Для этого можно использовать универсальное свойство margin, оно определяет отступы со всех сторон абзаца или margin-top для отступа сверху и margin-bottom для отступа снизу (пример 1).
Пример 1. Изменение значения отступов у абзаца
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Отступы в тексте</title> <style> p { margin-top: 0.5em; /* Отступ сверху */ margin-bottom: 1em; /* Отступ снизу */ } </style> </head> <body> <p>Солнце яркое светило, <br> Ветер выдался попутный - <br> Путешественникам выпал <br> Путь приятный и нетрудный. <br> Вдруг вдали корабль пиратов <br> Показался с длинным флагом; <br> Был таран на нем поставлен, <br> Приготовленный к атакам.</p> <p>Завывая громко в трубы, <br> Шли грабители навстречу, <br> Грозным голосом кричали, <br> Вызывая всех на сечу. <br> Корабельщики в испуге <br> Побелели, точно мел. <br> Только витязь был спокоен, <br> Только он не оробел.</p> </body> </html>
Результат примера показан ни рис. 1.
Рис. 1. Расстояние между абзацами текста
В данном примере применяются разные отступы сверху и снизу от абзаца. Это особенно имеет значение, когда в тексте встречаются изображения и подзаголовки.
Как сделать отступ снизу word?
После того, как Вы набрали в Ворде весь необходимый текст, или Вам дали уже набранный документ, можно переходить к редактированию и форматированию готового текста в Word. И одним из пунктов, которые Вам предстоит сделать – это настроить отступы для строк в документе.
В этой статье мы разберемся, как сделать отступ для всего абзаца, отступ только для первой строки и выступы для текста абзаца.
Начнем с первого вопроса. Сделать отступ для всего абзаца в Ворде от установленных границ полей можно с правой и с левой стороны. Установить отступы можно, используя специальные маркеры на верхней линейке документа. Если у Вас она не отображается, перейдите на вкладку «Вид» и в группе «Показать», поставьте галочку в поле «Линейка».
С правой стороны находится всего один маркер. Чтобы установить отступ справа для абзаца, кликните по нему левой кнопкой мыши и перетащите маркер на нужное расстояние на линейке. Цена деления линейки равна 0.25 см.
Если Вы не выделяли никакой текст, то отступ будет сделан для того абзаца, в котором установлен курсор. Если нужно сделать одинаковый отступ для всего текста, выделите его, нажав комбинацию «Ctrl+A», и перетащите маркер. Чтобы сделать отступ для разных абзацев в тексте, выделяйте их и перетаскивайте маркер.
С левой стороны на линейке есть три маркера. Для того чтобы сделать отступ слева в Ворде для всего текста в абзаце, кликните левой кнопкой мыши по нижнему маркеру, он имеет вид прямоугольника, и перетащите его на нужное расстояние на линейке.
При этом выделяйте весь текст или отдельные абзацы.
Если Вам нужно сделать отступ для первой строки, ее еще называют красная строка в Ворде, то на линейке с правой стороны, перетащите верхний маркер на нужное расстояние. Учитывая, что цена деления 0.25 см, в примере мы сделали отступ равный 1.25 см.
Прочесть подробную статью про абзацный отступ в Ворде, Вы сможете, перейдя по ссылке.
С помощью последнего маркера, можно сделать выступ для текста в абзаце. Кликните по нему левой кнопкой мыши и установите его на нужное расстояние на линейке. При этом весь текст в абзаце, за исключением первой строки, сдвинется на указанное значение.
Все рассмотренные отступы в Ворде можно сделать и другим способом. Для этого на вкладке «Главная» в группе «Абзац» кликните на маленькую черную стрелочку в правом нижнем углу.
Откроется диалоговое окно «Абзац». В соответствующих полях в нем можно задать точные значения для отступов. При этом внизу, в области «Образец», можно посмотреть, как изменяется Ваш текст.
Установить отступ для всего абзаца можно, указав значения в полях «Слева», «Справа», абзацный отступ устанавливается в поле «первая строка» – «Отступ», там же устанавливается и «Выступ» для текста в абзаце. Когда выберите нужные значения, нажмите «ОК».
Если Вас интересует, как сделать или убрать интервалы между абзацами в Ворде, прочтите статью, перейдя по ссылке.
Думаю, теперь у Вас точно получится сделать отступы и выступы в тексте для всего абзаца или только для первой строки в Ворде.
Поделитесь статьёй с друзьями:
Меня конкретно интересует как уменьшить пробел с лево т. е. как переместить левые маркёры от нулевой точки в лево. Почему левые маркёры не передвигаются в лево( от ноля ) по трём (3см)темным делениям линейки, а правый маркёр передвигается?
Отступы и интервалы в программе Microsoft Word расставляются согласно значениям, заданным по умолчанию. Кроме того, их всегда можно изменить, настроив под собственные нужды, требования преподавателя или заказчика. В этой статье мы расскажем о том, как сделать отступ в Ворде.
Урок: Как убрать большие пробелы в Word
Стандартные отступы в Ворде — это расстояние между текстовым содержимым документа и левым и/или правым краем листа, а также между строками и абзацами (интервалы), установленное в программе по умолчанию. Это одна из составляющих форматирования текста, и без этого довольно сложно, а то и вовсе невозможно обойтись во время работы с документами. Подобно тому, как в программе от Майкрософт можно изменить размер текста и шрифт, в ней можно изменить и размеры отступов. Как это сделать, читайте ниже.
1. Выделите текст, для которого необходимо настроить отступы (Ctrl+A).
2. Во вкладке “Главная” в группе “Абзац” разверните диалоговое окно, нажав на небольшую стрелочку, расположенную в правой нижней части группы.
3. В диалоговом окне, которое появится перед вами, установите в группе “Отступ” необходимые значения, после чего можно нажать “ОК”.
Совет: В диалоговом окне “Абзац”
в окне “Образец” вы можете сразу видеть то, как будет меняться текст при изменение тех или иных параметров.
4. Расположение текста на листе изменится согласно заданным вами параметрам отступов.
Помимо отступов, вы также можете изменить и размер междустрочных интервалов в тексте. О том, как это сделать, читайте в статье, представленной по ссылке ниже.
Урок: Как изменить межстрочный интервал в Word
Обозначение параметров отступов в диалоговом окне
“Абзац”Справа — смещение правого края абзаца на заданное пользователем расстояние;
Слева — смещение левого края абзаца на расстояние, указанное пользователем;
Особые — этот пункт позволяет задавать определенный размер отступа для первой строки абзаца (пункт “Отступ” в разделе “Первая строка”). Отсюда же можно задать и параметры выступа (пункт “Выступ”). Аналогичные действия можно выполнить и с помощью линейки.
Урок: Как включить линейку в Ворде
Зеркальные отступы — установив галочку на этом пункте, вы измените параметры “Справа” и “Слева” на “Снаружи” и “Внутри”, что особенно удобно во время печати в книжном формате.
Совет: Если вы хотите сохранить внесенные вами изменения в качестве значений по умолчанию, просто нажмите на одноименную кнопку, расположенную в нижней части окна
“Абзац”.
На этом все, ведь теперь вы знаете, как сделать отступ в Ворде 2010 — 2016, а также в более ранних версиях этого программного офисного компонента. Продуктивной вам работы и только положительных результатов.
Мы рады, что смогли помочь Вам в решении проблемы.
Задайте свой вопрос в комментариях, подробно расписав суть проблемы. Наши специалисты постараются ответить максимально быстро.
Помогла ли вам эта статья?
Да Нет
Отступы. Утилиты · Bootstrap. Версия v4.2.1
Bootstrap включает широкий диапазон сокращений откликов и полезных классов для изменения внешнего вида элемента.
Как это устроено
Назначайте «отзывчивые» значения margin или padding элементу или поднабору его сторон с помощью удобных классов. Сюда входит поддержка индивидуальных свойств, всех свойств и вертикальных и горизонтальных свойств. Классы созданы дефолтной карте Sass, и варьируются от .25rem до 3rem.
Замечание
Утилиты отступов, которые работают на всех брейкпойнтах – от xs до xl – не имеют аббревиатуры брейкпойнта в названии. Это сделано потому, что те классы применяются, начиная с
Классы названы по формату {property}{sides}-{size} для xs и {property}{sides}-{breakpoint}-{size} для sm, md, lg и xl.
Где свойство – это одно из:
m— для классов, которые задаютmarginp— для классов, которые задаютpadding
Где свойство – это одно из:
t— для классов, которые задаютmargin-topилиpadding-topb— для классов, которые задаютmargin-bottomилиpadding-bottoml— для классов, которые задаютmargin-leftилиpadding-leftr— для классов, которые задаютmargin-rightилиpadding-rightx— для классов, которые задают и*-leftи*-righty— для классов, которые задают и*-topи*-bottom- blank — для классов, которые задают
marginилиpaddingдля всех 4-х сторон элемента
Где размер – это один из:
0— для классов, которые удаляютmarginилиpaddingназначая его равны01— (по умолчанию) для классов, которые устанавливаютmarginилиpaddingк значению, равному$spacer * .252— (по умолчанию) для классов, которые устанавливаютmarginилиpaddingк значению, равному$spacer * .53— (по умолчанию) для классов, которые устанавливаютmarginилиpaddingк значению, равному$spacer4— (по умолчанию) для классов, которые устанавливаютmarginилиpaddingк значению, равному$spacer * 1.55— (по умолчанию) для классов, которые устанавливаютmarginилиpaddingк значению, равному$spacer * 3auto— для классов, которые устанавливаютmarginкак auto
(Вы можете добавить больше размеров, добавляя разделы в карту Sass $spacers.)
Примеры
Вот несколько понятных примеров этих классов:
.mt-0 {
margin-top: 0 !important;
}
.ml-1 {
margin-left: ($spacer * .25) !important;
}
.px-2 {
padding-left: ($spacer * .5) !important;
padding-right: ($spacer * .5) !important;
}
.p-3 {
padding: $spacer !important;
}Горизонтальное центрирование
В дополнение, Bootstrap также включает класс .mx-auto для горизонтального выравнивания блока блока содержимого фиксированной ширины – т.е. контент, которому заданы display: block и набор width с помощью установки горизонтальных марджинов как auto.
Центрированный элемент
<div>
Центрированный элемент
</div>Отрицательные отступы
В CSS свойства полей margin могут использовать отрицательные значения (padding не может). Начиная с версии 4.2, мы добавляли утилиты с отрицательным запасом для каждого ненулевого целочисленного размера, указанного выше (например, 1, 2, 3, 4, 5). Эти утилиты идеально подходят для настройки желобов столбцов сетки через точки останова (breakpoints).
Синтаксис почти такой же, как у утилит с положительным запасом по умолчанию, но с добавлением n перед запрошенным размером. Вот пример класса, который противоположен .mt-1:
.mt-n1 {
margin-top: -0.25rem !important;
}Вот пример настройки сетки Bootstrap на средней (md) точке останова и выше. Мы увеличили заполнение .col с помощью .px-md-5, а затем противодействовали этому с .mx-md-n5 на родительском .row.
Custom column padding
Custom column padding
<div>
<div>Custom column padding</div>
<div>Custom column padding</div>
</div>Как сделать отступ вокруг элемента, разница между margin и padding, тег br
14.07.18 CSS 1379
При верстке страниц сайта элементы размещаются в определенном порядке, делаются отступы между ними, как вертикальные, так и горизонтальные. Отступы можно сделать разными способами, наиболее часто используются CSS свойства margin и padding. Какая разница между этими свойствами? Ответ будет дан ниже.
Кроме вышеназванных свойств CSS, отступы можно делать другими средствами, все зависит от выбранного позиционирования. Например, при абсолютном позиционировании можно использовать свойства top, right, bottom, left. При обычном позиционировании элементов применяются свойства margin и padding.Свойства margin:
- margin-top,
- margin-right,
- margin-bottom,
- margin-left.
Свойства padding:
- padding-top,
- padding-right,
- padding-bottom,
- padding-left.
Как видно выше, margin и padding – это просто сокращенные названия свойств, можно сразу указать в таких свойствах все значения отступов через запятую для каждой стороны, а не писать по отдельности. Например, посмотрите на записи ниже – первая запись подробная, вторая запись сокращенная. Какую использовать, решать разработчику.
.class {
margin-top: 1px;
margin-right: 2px;
margin-bottom: 3px;
margin-left: 4px;
}
.class {
margin: 1px 2px 3px 4px;
}
Какая разница между margin и padding? Свойство margin служит для создания внешнего отступа, то есть отступы будут делаться от элемента. А свойство padding создает внутренние отступы, то есть содержимое элемента будет удаленно от его внутренних границ на указанные значения.
Часто можно увидеть, что для вертикальных отступов используется тег br. Это является ошибкой, так как этот тег предназначен для переноса строк текста, а не для верстки страниц сайта. Вместо этого тега следует прописать стили у нужного элемента и задать свойство margin-top или margin-bottom – в результате будут сделаны нужные отступы от элемента.
В консоли браузера, можно легко наглядно увидеть, какие отступы заданы для выбранного элемента. Для этого необходимо выбрать элемент и в колонке консоли, где перечислены CSS свойства элемента, пролистать вниз, обычно там есть изображение с отступами вокруг элемента. Там можно увидеть все отступы, включая отступы, созданные свойством border.
Таким образом, важно правильно использовать CSS свойства для задания отступов вокруг элемента. Для упрощения процесса разработки можно воспользоваться специальными средствами, которые покажут существующие значения всех отступов.
Устранение смещения якорей из-за фиксированного блока, HTML+CSS
Впервые я столкнулся с этим, когда делал на своем сайте выплывающую панель «Поделиться в соц сетях» при скролле поста вниз (попробуйте).
При использовании ссылок-якорей на сайте, после перехода по ссылке, панель соц сетей закрывала верхнюю часть контента (как правило заголовок) и в итоге пользователю просто было непонятно, куда он в итоге попал. Вы можете опробовать это сами, кликнув по ссылке «A» ниже.
А так как сейчас очень популярно делать фиксированные шапки и меню position:fixed, прилепленные к верхней части экрана, то думаю что этот пост будет интересен многим. В нём я рассмотрю несколько вариантов якорей с отступами от верхней границы экрана при переходе по ним.
Для более ясного понимания на все h3-заголовки я добавил заливку.
A: Стандартный якорь
Пример того, как работает стандартная ссылка-якорь. Если вы попали сюда, кликнув по ссылке, а не просто проскроллили страницу, то скорее всего заголовок у вас оказался полностью скрыт под панелью соц сетей.
Возможно было бы правильнее назвать пост не «5 методов…», а «4 метода…». Потому что это и не метод вовсе, а показательный пример того, как быть не должно, ну да ладно.
Б: Отступ в виде псевдоэлемента
Используем псевдоэлемент для добавления отступа перед элементом — :before или :after.
Поддержка браузерами: Chrome конечно же, IE8+, Firefox 3+, Opera 9.25+, Safari 3+.
Замечания:
- Требуется поддержка браузером CSS псеводоэлементов.
- Метод не работает корректно, если у элемента есть фон или заливка (наезжает на контент).
- Не работает корректно, если у элемента есть свойства
padding-topилиborder-top.
#link-B:before {
display: block;
content: "";
height: 55px;
margin: -55px 0 0;
}В: Положительный padding и отрицательный margin
Используем padding для создания отступа и отрицательный margin, чтобы этот же отступ убрать, а точнее — сделать его незаметным для пользователей.
Обратите внимание, что внутренные отступы padding тоже попадают под заливку, то есть, если у вашего элемента будет фон, то он скорее всего наедет на контент перед ним. Для того, чтобы игнорировать padding при добавлении фона на элемент, используйте CSS-свойство background-clip:content-box.
Поддержка браузерами: Chrome конечно же, Firefox 4.0+, Opera 10.6+, Safari 3+.
Замечания:
- Необходима поддержка браузером
background-clip:content-box, но это только в том случае, если вы хотите добавить фон элементу. - Некоторые ограничения при использовании
margin(в том числе при margin-collapse — это когда из нижнего отступа первого элемента и верхнего отступа второго определяется наибольший, который и становится величиной отступа между этими элементами). - Невозможность использования
padding-top.
#link-C {
padding-top: 55px;
margin-top: -55px;
-webkit-background-clip: content-box;
background-clip: content-box;
}Г: Border и отрицательный margin
По сути то же самое, что и предыдущий метод, но вместо padding используем border. Что это нам даёт?
- Теперь вы спокойно можете использовать внутренние отступы
padding. - Постараюсь выразиться правильно — по идее
border— это тот жеpadding, но только с заливкой и эффектами. Поэтому при использовании фона или заливки элемента нам нужно учесть, чтобы она распростаранялась на сам элемент и наpadding, но не наborder(ведь он то у нас прозрачный), здесь поможетbackground-clip:padding-box. - Ограничение в использовании
border-top, которое однако легко решаемо — смотрите ниже.
Поддержка браузерами: Chrome конечно же, Firefox 1.0+, Opera 10.5+, Safari 3+.
#link-D {
border-top: 55px solid transparent;
margin-top: -55px;
padding: 15px; /* паддинги - без проблем */
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}Д: Метод Г с возможностью добавления border-top
Дополнение к предыдущему методу, которое позволит добавить на элемент верхний border. Поддержка браузерами псевдоэлементов и background-clip (только при наличии фона или заливки) обязательна.
Поддержка браузерами: Chrome конечно же, Firefox 3.5+, Opera 10.5+, Safari 3+.
#link-E {
position: relative; /* важно - для того, чтобы псевдоэлемент позиционировался относительно этого элемента */
border-top: 55px solid transparent;
margin-top: -55px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
#link-E:before {
content: "";
position: absolute;
top: -2px; /* равен по модулю толщине border */
left: 0;
right: 0;
border-top: 2px solid #ccc; /* собственно то, ради чего всё затевалось */
}Миша
Недавно я осознал, что моя миссия – способствовать распространению WordPress. Ведь WordPress – это лучший движок для разработки сайтов – как для тех, кто готов использовать заложенную структуру этой CMS, так и для тех, кто предпочитает headless решения.
Сам же я впервые познакомился с WordPress в 2009 году. Организатор WordCamp. Преподаватель в школах Epic Skills и LoftSchool.
Если вам нужна помощь с вашим сайтом или может даже разработка с нуля на WordPress / WooCommerce — пишите. Я и моя команда сделаем вам всё на лучшем уровне.
| ctrll | Выделить строку. |
| ctrlshiftm | Выделить текст между двумя парными скобками. |
| ctrlshifta | Выделить текст между двумя парными тегами. |
| ctrlshiftj | Выделить текст с соответствующим отступом. |
| ctrlshiftspace | Выделить по контексту. |
| ctrlshiftleft | Выделить слово слева. |
| ctrlshiftright | Выделить слово справа. |
| ctrla | Выделить весь текст. |
| ctrlshiftl | Разделить выделенные строки на независимые участки редактирования. |
| ctrlshiftup | Переместить выделенные строки вверх. |
| ctrlshiftdown | Переместить выделенные строки вниз. |
| ctrlshiftd | Дублировать строку. |
| ctrlshiftk | Удалить строку. |
| ctrlbackspace | Удалить часть слова до курсора. |
| ctrldelete | Удалить часть слова после курсора. |
| ctrlshiftbackspace | Удалить текст от курсора и до начала строки. |
| ctrlk, ctrlbackspace | Удалить текст от курсора и до начала строки. |
| ctrlshiftdelete | Удалить текст от курсора и до конца строки. |
| ctrlk, ctrlk | Удалить текст от курсора и до конца строки. |
| ctrlj | Объединить выделенные строки. |
| altq | Объединить строки в параграфе. |
| ctrlenter | Добавить пустую строку под курсором. |
| ctrlshiftenter | Добавить пустую строку над курсором. |
| ctrlaltup | Добавить курсор на следующей или предыдущей строке. |
| ctrlaltdown | Добавить курсор на следующей или предыдущей строке. |
| ctrl/ | Добавить или убрать однострочный комментарий. |
| ctrlshift/ | Добавить или убрать блочный комментарий. |
| f9 | Отсортировать строки в алфавитном порядке. |
| ctrlf9 | Отсортировать строки в алфавитном порядке с учетом регистра. |
| ctrlk, ctrll | Трансформировать выделенный текст в нижний регистр. |
| ctrlk, ctrlu | Трансформировать выделенный текст в верхний регистр. |
| ctrlt | Транспонировать текст. |
| alt. | Закрыть незакрытый тег. |
| altshiftw | Обернуть тегом выделенный текст. |
| insert | Переключить режим ввода: вставка или замена. |
| ctrlk, ctrlspace | Установить метку. |
| ctrlk, ctrla | Выделить текст от курсора до метки. |
| ctrlk, ctrlx | Поменять местами метку и курсор. |
| ctrlk, ctrlw | Удалить метку. |
| ctrlk, ctrlg | Удалить все метки. |
| ctrl] | Убрать отступ. |
| ctrl[ | Добавить отступ. |
| ctrly | Повторить последнее действие. |
| ctrlc or ctrlinsert | Копировать. |
| ctrlv or shiftinsert | Вставить. |
| ctrlshiftv | Вставить с отступом. |
| ctrlx | Вырезать. |
| shiftdelete | Вырезать. |
| ctrlz | Отмена последнего действия. |
| ctrlshiftz | Повторить последнее отмененное действие. |
| ctrlu | Отменить последнее выделение. |
| ctrlshiftu | Повторить последнее отмененное выделение. |
Как сделать отступ от блока в css. Управление отступами в html на css
Приветствую вас на моем блоге. Css (каскадные таблицы стилей) предоставляет много возможностей для настройки внешнего вида веб-страниц. Сегодня я хотел бы коротко показать, как определить в css отступ сверху или с любой другой стороны для любого элемента.
Внешний отступ
Внешний отступ задается с помощью свойства margin . С его помощью можно задать отступы сразу со всех четырех сторон, либо использовать другие свойства: margin-top, margin-left, margin-right, margin-bottom , которые позволяют сделать его только с одной стороны.
Внешний отступ определяет расстояние, на которое выбранный край элемента будет отодвинут от других элементов на странице. Например, запись:
P, div{
Margin-top: 20px;
}
Означает, что все блоки и абзацы получат отступ сверху на 20 пикселей, то есть их верхний край будет отодвинут от прилегающих к нему элементов на это расстояние.
Отступы можно записать с каждой стороны только с помощью одного свойства margin, которому записывается 4 значения подряд:
Div{
Margin: 20px 10px 20px 10px;
}
Отступы будут даны с верхнего, правого, нижнего и левого краев соответственно. Поскольку в этом случае они равны с противоположных сторон, то можно было бы записать еще так:
Div{
Margin: 20px 10px;
}
Первое значение – это отступ сверху и снизу, а второе – по бокам.
Внутренний отступ
Внутренний отступ работает по-другому – он не отодвигает блок от других элементов, а добавляет это расстояние внутри элемента, отодвигая содержимое (контент) блока от его краев. Это удобно. Где вы видели сайт, на котором текст начинается в самом левом верхнем крае окна?
Я такого не видел, потому что веб-разработчики всегда применяют внешние и внутренние отступы, чтобы текст читался максимально удобно. Внутренние отступы прописываются с помощью свойства padding , в котором через пробел можно перечислять сразу 4 значений для всех краев соответственно.
Также аналогично с margin можно дописать название стороны и задать расстояние только для нее. Например, отступ сверху можно написать с помощью padding-top . В целом, свойство padding работает абсолютно аналогично свойству margin .
Для примера можно привести такой кусок кода:
Block{
Width: 200px;
Padding: 20px;
}
Как вы думаете, какова будет реальная ширина нашего элемента? Тут видно, что она 200 пикселей, но паддинги добавляют по бокам с каждой стороны еще по 20, итого 240 пикселей. Учитывайте это при верстке.
Также хотел бы отметить, что padding нормально задается только блочным элементам, строчным лучше его не давать. Margin нормально работает с любыми элементами.
Блочная верстка частенько используется при создании сайта или блога. Как следствие этого — часто требуется делать отступы у блоков. По этой причине о том, как сделать отступы в CSS подробно описано в данном уроке. Для браузера каждый тег является контейнером, у которого есть содержимое, внутренний отступ, внешние поля, а также рамка. В данном уроке мы научимся делать внутренние и внешние отступы, рассмотрим основные их параметры.
На рисунке ниже наглядно представлены параметры отступов блоков:
Как видно, отступы можно делать в четырех направлениях: верхний отступ (top), нижний отступ (bottom), левый отступ (left) и правый отступ (right). В качестве единиц измерения могут быть пиксели, проценты и другие единицы CSS — подробнее о них . В уроке используются пиксели.
Внутренние отступы блоков
За внутренние отступы в CSS отвечает свойство padding . Итак, давайте рассмотрим пример задания внутренних отступов у блока:
padding-top: 5px; /*верхний внутренний отступ*/ padding-left: 8px; /*левый внутренний отступ*/ padding-right: 8px; /*правый внутренний отступ*/ padding-bottom: 5px; /*нижний внутренний отступ*/
В данном примере внутренние отступы задаются отдельно для каждой стороны блока. Кроме этого, существует несколько способов задания отступов в CSS:
margin: 5px 8px 5px 8px; /*верхний, правый, нижний, левый внешние отступы*/ margin: 5px 8px 5px; /*описывает верхний, левый и правый, нижний отступы*/ margin: 5px 8px; /*описывает верхний и нижний, правый и левый отступы*/ margin: 7px; /*описывает все внутренние отступы по 7px*/
Запомнить проще первый и последний способы. В первом случае отступы ставятся по часовой стрелке (верхний, правый, нижний, левый) — величину отступа мы можем указать любую, в последнем случае отступы со всех сторон будут одинаковые.
Внешние отступы блоков
За внешние отступы в CSS отвечает свойство margin . Примеры внешних отступов в CSS:
margin-top: 5px; /*верхний внешний отступ*/ margin-left: 10px; /*левый внешний отступ*/ margin-right: 10px; /*правый внешний отступ*/ margin-bottom: 5px; /*нижний внешний отступ*/
padding: 5px 10px 5px 10px; /*верхний, правый, нижний, левый внешние отступы*/ padding: 5px 10px 5px; /*описывает верхний, левый и правый, нижний отступы*/ padding: 5px 10px; /*описывает верхний и нижний, правый и левый отступы*/ padding: 7px; /*описывает все внешние отступы по 7px*/
Таким образом, как сделать отступы в CSS — вопрос не сложный, но весьма актуальный. Чтобы лучше усвоить описанную выше информацию следует запомнить, что существует два свойства: padding — внутренние отступы и margin — внешние отступы. Также, как вы уже знаете, способов задания отступов существует несколько, можно их использовать.
Здравствуйте! Изначально хотел разделить эту статью на 4 маленьких, но потом задумался. Зачем? Ведь удобнее, когда такая информация собрана в рамках одного материала.
Поэтому сегодня мы узнаем, как сделать CSS отступ слева и со всех остальных сторон – справа, сверху и снизу. Их можно делать для картинок и текстов. Они бывают двух видов:
- Внешние;
- Внутренние.
Для первых используется ключевое свойства margin, для вторых – padding. Для наглядности сделал для вас небольшой пример. Чтобы визуально было удобно различать внутреннее и внешнее пространство добавил видимую таблицу. Взглянем, что получилось?
Внешние отступы
Прописав их в файле стилей CSS, получится задать ориентацию информационного блока на странице. Например, сдвину его влево и вниз. Давайте сразу продемонстрирую, как это будет выглядеть.
В целом можно применять нижеперечисленные варианты для задания отступов.
Слева (margin-left).
Справа (margin-right).
Сверху (margin-top).
Снизу (margin-bottom).
Сейчас покажу еще классный нюанс.
Как видите, можно использовать один из вариантов – эффект одинаковый. Только во втором случае код получается более компактным. Также заметьте, что отступы задаются по часовой стрелке. Все начинается сверху и заканчивается слева.
Внутренние отступы
Порядок действий здесь похожий. Только теперь добавлю новые свойства не для всей таблицы, а для содержимого столбцов.
Смотрим, что из этого вышло.
По аналогии с внутренними отступами в CSS внешние можно прописывать сокращенным кодом или для сторон по отдельности.
Это были основные моменты. Напоследок покажу, как еще можно облегчить некоторую работу.
Отступы на уровне выбранных тегов
В случаях, которые посмотрели выше, они задаются для текста и картинок одновременно. На самом деле можно задать расстояние до элементов на уровне определенного тега. Покажу, как это работает. Отменяю последние изменения и указываю специальный код в файле стилей.
Взглянем, что произошло после сохранения изменений.
Картинка осталась на месте, слева сместился только текст, заключенный в . Похожие манипуляции можно применять и к другим блокам, например, tr, span.
В качестве дополнительной информации предлагаю для ознакомления публикацию о задании . Там тоже описаны достаточно интересные способы. Может пригодиться для формирования красной строки в тексте или проведения других действий.
Дополнительно работает подписка на бесплатную рассылку информации по электронным адресам. Для подписки на блоге есть специальная форма. До связи.
Для более красивого отображения элементов на web-странице применяют внешний и внутренний отступы в css и на примерах мы это сейчас разберём.
Каждый элемент, будь это параграф, div, картинка или видео, — это некий блок, в котором можно сделать отступы как внутри с помощью свойства padding , так и снаружи с помощью margin .
В css прописываются эти свойства для отступов таким образом (для примера взят параграф):
Вместо тега P вы пропишите свой элемент разумеется, для которого будут применены отступы.
Обязательно нужно уяснить и запомнить, что для параметров margin
и padding
построение отступов для каждой стороны идёт одинаковое.
То есть, у нас по 4 значения в каждом отступе:
Значения отступов.
- Первое значение: отступ сверху;
- Второе значение: отступ справа;
- Третье значение: отступ снизу;
- Четвёртое значение: отступ слева.
В данном примере я сделал margin внешний отступ в css таким образом: сверху я прописал 20px , слева и справа по 10px (как правило они для симметрии прописываются одинаковые), и снизу указал 30px .
А для padding внутреннего отступа я указал: по 10px сверху, слева и справа, и 14px снизу.
Значение для отступов в свойствах margin
и padding
можно сокращать, при условии если они имеют одинаковую величину.
Из моего примера сокращённая запись будет иметь такой уже вид:
То есть, когда отсутствует последняя числовая запись, в данном случае для отступа слева, то браузер автоматически подставляет для отступа слева такое же значение как и у значения справа.
И в моём случае отступы справа и слева будут по 10px
что в margin
, что в padding
.
А если у вас одинаковые величины для внешних отступов сверху и снизу (к примеру: 16px ), и так же одинаковые величины для внешних отступов слева и справа (к примеру: 20px ), то запись будет иметь ещё более сокращённый вид:
Соответственно для внутреннего отступа css запись делается идентично этой.
Применение одинарных отступов: для каждой стороны отдельно.
Для указания отдельного отступа применяются следующие свойства с одним значением:
Свойства отступа для каждой стороны.
- margin-top: 3px; внешний верхний отступ;
- margin-left: 4px; внешний левый отступ;
- margin-right: 6px; внешний правый отступ;
- margin-bottom: 10px; внешний нижний отступ.
Точно так же прописываются записи и для внутренних отступов, только нужно заменить margin на padding .
К примеру у вас для всех картинок img уже прописаны в css все отступы.
То есть (для уяснения) внешний отступ имеет такие значения: сверху 10px
, слева и справа: по 20px
, и снизу 14px
.
А внутренний отступ равен по 6px
со всех 4-ёх сторон.
Допустим, вы решили поставить ещё картинку на страницу, но для неё вы хотите изменить только внешний отступ сверху, а остальные оставить как есть. И для выполнения этой задачи достаточно прописать class для этой картинки, и добавить в css дополнительную запись.
В итоге, добавленная вами картинка с классом verx примет все отступы прописанные в css для тега img , и изменит только внешний отступ для верхней стороны (в нашем случае: 40px ).
Я постарался сделать описание для отступов css более детально, но если возникнут вопросы задавайте их через комментарии.
Описание
Устанавливает величину отступа от правого края элемента. Отступом является расстояние от внешнего края правой границы текущего элемента до внутренней границы его родительского элемента (рис. 1).
Синтаксис
margin-right: значение | auto | inherit
Значения
Величину правого отступа можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. Значение может быть как положительным, так и отрицательным числом.
Auto Указывает, что размер отступов будет автоматически рассчитан браузером. inherit Наследует значение родителя.
HTML5 CSS2.1 IE Cr Op Sa Fx
margin-rightLorem 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.
Результат данного примера показан на рис. 2.
Рис. 2. Применение свойства margin-right
Объектная модель
document.getElementById(«elementID «).style.marginRight
Браузеры
Браузер Internet Explorer 6 удваивает значение левого или правого отступа для плавающих элементов, вложенных в родительские элементы. Удваивается тот отступ, который прилегает к стороне родителя. Проблема обычно решается добавлением display: inline для плавающего элемента.
Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .
Согласованный отступ списка — CSS: каскадные таблицы стилей
Одним из наиболее распространенных изменений стиля, вносимых в списки, является изменение расстояния отступа, то есть того, насколько далеко элементы списка сдвигаются вправо. Это часто приводит к разочарованию, потому что то, что работает в одном браузере, часто не дает того же эффекта в другом. Например, если вы заявляете, что списки не имеют левый край, они подвинуться в Internet Explorer, но сидеть упорно на месте в Gecko основе browsers.This статья поможет вам понять проблемы, которые могут возникнуть и как их избежать.
Чтобы понять, почему это так, и, что более важно, как вообще избежать проблемы, необходимо изучить детали построения списка.
Сначала мы рассматриваем один чистый элемент списка. Этот элемент списка не имеет маркера (также известного как «маркер») и еще не является частью самого списка. Он одиноко висит в пустоте, простой и без украшений, как показано на Рисунке 1.
Эта пунктирная красная граница представляет внешние края области содержимого элемента списка.Помните, что на данный момент элемент списка не имеет отступов или границ. Если мы добавим еще два элемента списка, мы получим результат, подобный показанному на рисунке 2.
Теперь мы помещаем их в родительский элемент; в этом случае мы заключим их в неупорядоченный список (например,
Здесь пунктирная синяя граница показывает края области содержимого элемента
Теперь добавляем маркеры пунктов списка. Поскольку это неупорядоченный список, мы добавим традиционные «маркеры» с закрашенными кружками, как показано на рисунке 4.
Визуально маркеры находятся на за пределами области содержимого
Вот почему в каждом браузере, кроме Internet Explorer для Windows, маркеры размещаются за пределами любой границы, установленной для элемента list-style-position равно за пределами .Если он изменяется на внутри , тогда маркеры переносятся внутри содержимого
Итак, как все это будет отражено в документе? На данный момент у нас есть ситуация, аналогичная этим стилям:
ul, li {margin-left: 0; padding-left: 0;} Если бы мы поместили этот список в документ как есть, не было бы видимых отступов, и маркеры могли бы упасть с левого края окна браузера.
Чтобы избежать этого и получить некоторый отступ, разработчикам браузеров доступны только три варианта.
- Дайте каждому элементу
- Дайте элементу
- Добавьте левому отступу элементу
Оказывается, первым вариантом никто не воспользовался. Второй вариант использовали Internet Explorer для Windows и Macintosh и Opera.Третий вариант был принят Gecko и, соответственно, всеми браузерами, которые его встраивают.
Давайте на мгновение рассмотрим два подхода. В Internet Explorer и Opera списки имеют отступ, устанавливая левое поле в 40 пикселей для элемента
Gecko, с другой стороны, устанавливает левый отступ в 40 пикселей для элемента
Как мы видим, маркеры остаются прикрепленными к элементам
Вскипите все, и у нас осталось следующее: если вы хотите согласованную визуализацию списков между Gecko, Internet Explorer и Opera, вам нужно установить и для левого поля и для левого отступа для < ul> элемент.Для этих целей мы можем полностью игнорировать
ul {margin-left: 0; padding-left: 40px;} Если вас больше интересует модель Internet Explorer / Opera, то:
ul {маржа слева: 40 пикселей; padding-left: 0;} Конечно, вы можете ввести свои собственные предпочтительные значения. Установите оба значения на 1.25em , если хотите — нет причин, по которым вам нужно придерживаться пиксельного отступа.Если вы хотите сбросить списки, чтобы не было отступов, вам все равно нужно обнулить как отступы, так и поля:
ul {margin-left: 0; padding-left: 0;} Однако помните, что при этом маркеры будут висеть за пределами списка и его родительского элемента. Если родитель body , есть большая вероятность, что ваши маркеры будут полностью за пределами окна браузера и, следовательно, не будут видны.
В итоге мы видим, что ни один из браузеров, упомянутых в этой статье, не является правильным или неправильным в том, как они формируют списки.Они используют разные стили по умолчанию, и именно здесь закрадываются проблемы. Убедившись, что вы стилизуете и левое заполнение, и левое поле списков, вы можете найти гораздо большую кроссбраузерную согласованность в отступах вашего списка.
- При изменении отступа списков убедитесь, что установлены поля и поля.
Информация об исходном документе
- Автор (ы): Эрик А. Мейер, Netscape Communications
- Дата последнего обновления: Опубликовано 30 августа 2002 г.
- Информация об авторских правах: Copyright © 2001-2003 Netscape.Все права защищены.
- Примечание. Эта перепечатанная статья изначально была частью сайта DevEdge.
Отступ и интервал HTML
Когда вы пишете HTML (или любой другой язык программирования), хорошо написанный код следует последовательным шаблонам отступов и интервалов. В некоторых языках отступы и интервалы даже требуются для правильной работы кода. Хотя это не относится к HTML или JavaScript, все же очень важно правильно отступать в нашем коде.Правильный отступ делает наш код более чистым и читаемым. Это также упрощает предотвращение ошибок.
Отступ двумя пробелами в коде
В сообществе программистов вокруг отступов ведутся два спора. Первая дискуссия заключается в том, следует ли использовать пробелы или табуляции для отступа в нашем коде. Второй вопрос о том, должны ли наши отступы равняться 2 пробелам или 4 пробелам.
Во время введения в программирование мы делаем отступ на 2 пробела в коде и используем табуляцию вместо пробелов для отступов. Размер вкладки по умолчанию в VSCode составляет 4 пробела, поэтому нам нужно его обновить.Мы можем установить размер вкладки, перейдя в Код > Настройки> Настройки , а затем посмотрев на параметры Обычно используемые . Вы увидите опцию Editor: Tab Size , которую вы можете установить на 2.
Мы кратко обсудим 2 против 4 пробелов и табуляции вместо пробелов в конце урока.
Отступ HTML
Давайте посмотрим, как выглядит хороший отступ HTML, а затем рассмотрим пример плохого отступа.
Пример заголовка
Пример заголовка
Меньший заголовок
Содержание страницы
Как мы видим здесь, когда тег HTML вложен в другой тег HTML, он имеет отступ. Есть одно исключение: мы не делали отступы и внутри тега , хотя и — это , вложенные в него.Это обычное соглашение по экономии места. По мере того, как наш код становится более глубоко вложенным, в нашем редакторе кода может быть много пустого места, и в конечном итоге наш код выйдет за пределы экрана. Вот почему мы сторонники двух отступов вместо четырех — для экономии места в редакторе кода.
Кстати, обратите внимание, что мы можем создать тег самостоятельно — однако мы всегда будем добавлять lang (в нашем случае lang = "en-US" ). Как мы упоминали в прошлом уроке, у этого есть два преимущества: он обеспечивает лучшую доступность для программ чтения с экрана для людей с ослабленным зрением и упрощает программному обеспечению для перевода в браузере перевод нашего HTML на другие языки.Мы должны сделать наши сайты более доступными, если это возможно, и это простой шаг, который мы можем сделать в этом направлении.
Теперь давайте посмотрим на другие примеры отступов в приведенном выше HTML. Тег содержит весь HTML-код, который пользователь видит на самой странице. Поскольку все теги внутри являются вложенными (например, и ), они должны иметь отступ на два пробела глубже, чем .
Однако обратите внимание, что теги и .Это потому, что они не внутри закрывающего тега ( ). Мы обнаружили, что некоторые студенты сначала не понимают этого — и вот распространенная ошибка, которую мы видели у новичков:
Вот заголовок.
Вот заголовок меньшего размера.
Вот текст.
С организационной точки зрения это имеет смысл… но это не так.
Кстати, вам может быть интересно узнать об этом синтаксисе :
Это называется комментарием . Большинство языков программирования имеют возможность добавлять комментарии. Комментарии — это сообщения, которые люди должны прочитать — машина их игнорирует, чтобы они не запускались как код. В общем, ваш код должен говорить сам за себя. Это означает, что вы не хотите, чтобы у вас было слишком много комментариев.Однако они могут быть очень полезными. Обратите внимание, что синтаксис комментариев HTML отличается от синтаксиса комментариев на других языках. Однако мы пока не будем беспокоиться о других языках!
В VS Code есть ярлык для комментирования кода. Просто выделите то, что вы хотите прокомментировать (или раскомментировать), а затем удерживайте Command + / на Mac и CTRL + / на Windows. Это закомментирует код, если он не прокомментирован, и раскомментирует его, если он прокомментирован.Кроме того, VS Code будет автоматически использовать правильный синтаксис для комментариев для используемого вами языка.
Пример плохого отступа
Вернемся к отступам. Мы рассмотрели пример хорошего отступа и одну распространенную ошибку, которую допускают новички. Теперь давайте посмотрим на пример плохого отступа . Посмотрим, сможешь ли ты исправить это самостоятельно. Затем мы рассмотрим, что не так и как это исправить.
Пример заголовка
Пример заголовка
Меньший заголовок
Содержание страницы
А теперь давайте поближе посмотрим на проблемы построчно:
-
- В настоящее время
</code> не имеет отступа дальше <code><head> </code>, даже если он вложен в <code><head> </code>. Он должен иметь отступ на 2 пробела больше, чем <code><head> </code>. На самом деле нам не нужно менять его положение, потому что он будет иметь правильный отступ после устранения проблемы с тегом <code><head> </code>.</li><li> <code><h2></h2> </code> вложен на 4 пробела глубже, чем тег <code><body> </code>. Нам нужно быть последовательными при применении интервалов. Мы используем 2 пробела для отступа, поэтому 4 пробела несовместимы.</li><li> <code><h3></h3></code> вложен более глубоко, чем <code><h2></h2> </code>, даже если он не находится внутри закрывающего тега <code><h2></h2> </code>. <code><h3></h3></code> должен быть на том же уровне, что и <code><h2></h2> </code> — и в этом отношении тег <code><p> </code> должен быть таким же.</li></ul><h3><span class="ez-toc-section" id="_2_4"> Табуляция против пробелов … 2 пробела против 4 </span></h3><p> Теперь, когда мы рассмотрели основы отступов, давайте вкратце перейдем к дискуссии о табуляции и пробелах, а также двух пробелах и четырех, когда дело касается отступов. Все эти варианты верны — хотя телешоу «Кремниевая долина» (сатира на компьютерных программистов) превратило пробелы против табуляции в шутку и горячие дебаты. Итак, давайте посмотрим на плюсы и минусы обоих — и почему Epicodus делает все так, а не иначе.</p><h4><span class="ez-toc-section" id="i-36"> Табуляция против пробелов </span></h4><p> Аргументом в пользу вкладок является то, что они требуют меньшего количества нажатий клавиш. Одна вкладка будет согласованной, в то время как вы можете случайно нажать пробел слишком много или слишком много раз, что приведет к проблемам с отступом. Это особенно проблематично для новичков, которым бывает сложно правильно выстроить места. Вот почему мы рекомендуем использовать вкладки.</p><p> Аргумент против вкладок состоит в том, что разные машины настроены по-разному. Вкладка одного разработчика может состоять из двух пробелов, а вкладка другого разработчика может состоять из четырех пробелов.Таким образом, вкладка может означать одно для одного кодировщика и другое для другого. Между тем пространство — это всегда пространство.</p><h4><span class="ez-toc-section" id="2_4"> 2 места против 4 </span></h4><p> Аргумент в пользу двух пробелов заключается в том, что они занимают меньше места в редакторе кода, что может быть особенно полезно на меньшем экране ноутбука. Для вашего кода больше места — и вы будете смотреть на меньше пустого места. Когда файл имеет много уровней вложенности (как вы можете видеть в более длинном HTML-документе), ваш код не будет так сильно выходить за пределы экрана.</p><p> Мы знаем, что у многих наших студентов экраны меньшего размера — и в документах HTML часто неизбежен глубоко вложенный код. Вот почему мы предпочитаем 2 пробела.</p><p> Аргумент в пользу 4 пробелов заключается в том, что код более читабелен. Сотрудники Microsoft и многие разработчики C # /. NET выступают за четыре пробела. Вот почему в VS Code по умолчанию 4 пробела. Они утверждают, что глубоко вложенный код является признаком плохо написанного кода, поэтому в любом случае он не должен сильно выходить за рамки вашего экрана.</p><p> В конечном счете, ни один из этих вариантов неверен.Самое главное — быть последовательным везде в вашем коде!</p><p> Независимо от языка, на котором вы пишете код, изучите для него стандарты отступов и интервалов. Практикуйте последовательность, чтобы ваш код был легко читаем для других разработчиков, а также для вас самих.</p><p> На данный момент, даже с отступом в 2 пробела, вы часто обнаружите, что контент в вашем коде выходит за пределы экрана. Это может сильно раздражать. К счастью, в VS Code есть настройка, обеспечивающая отображение всего вашего кода.Перейдите в <em> View> Toggle Word Wrap </em>. Это заставляет текст на вашем экране переноситься внутрь экрана вашего редактора кода. Вы можете легко включить или выключить его. Иногда перенос текста может затруднить просмотр отступов в коде, но, как правило, это отличный инструмент, позволяющий убедиться, что вы видите весь свой код.</p><h2><span class="ez-toc-section" id="_Codeorg"> Документация по инструменту Code.org </span></h2><p> Когда вы пишете свою веб-страницу, вы должны организовать свой код таким образом, чтобы его было легче читать.Это называется форматированием <strong> </strong>. При форматировании кода вам будет легче находить и исправлять ошибки.</p><h3><span class="ez-toc-section" id="i-37"> Пробел </span></h3><p> Пробел — это любой символ, который отображается на экране как пробел, например пробел, вкладка или новая строка. Пробелы помогают разделить разные части документа, чтобы его было легче читать. Например, в коде HTML новые элементы обычно помещаются в новую строку, даже если это не имеет никакого значения в том, как отображается страница.</p><p> Например, сравните код в двух полях ниже.</p><pre> <body> <h2><span class="ez-toc-section" id="i-38"> Вот мой список </span></h2> <ol> <li> Пункт 1 </li> <li> Пункт 2 </li> </ol> </body> </pre><pre> <body> <h2><span class="ez-toc-section" id="i-39"> Вот мой список </span></h2> <ol> <li> Пункт 1 </li> <li> Пункт 2 </li> </ol> </body> </pre><p> Оба будут отображать одну и ту же веб-страницу, но код в верхнем поле будет намного легче читать.Лучше начинать новые элементы с новой строки.</p><h3><span class="ez-toc-section" id="i-40"> Углубление </span></h3><p> Очень распространенный тип форматирования в HTML — это отступ <strong> </strong>. Отступ — это размещение текста дальше вправо или влево, чтобы отделить его от окружающего текста. Отступы помогают передать структуру программы. В HTML элементы, которые находятся внутри других элементов, обычно имеют отступ.</p><p> Вот пример:</p><pre> <body> <p> Этот абзац находится внутри элемента "body".</p> </body> </pre><p> Отступ может помочь вам вспомнить, закрыли ли вы тег, а также проясняет, какие теги находятся внутри других.</p><p> По мере того, как ваши веб-страницы становятся более сложными, вы захотите использовать <strong> комментариев </strong>. Комментарии объясняют различные части кода и то, что он должен создавать. Комментарии могут помочь вам в отладке, а также помогут другим людям, которые пытаются понять ваш код.</p><pre> <! - это комментарий -> </pre><p> Нашли ошибку в документации? Дайте нам знать в документации @ code.org</p><h2><span class="ez-toc-section" id="i-41"> Использование отступов </span></h2><p> Создание отступов в текстовом редакторе — тривиальная задача, о которой даже не нужно думать. В форматах на основе HTML с отступами не все так просто. HTML не поддерживает ни табуляции, ни множественные пробелы, поэтому вы не можете использовать их для создания абзацев с отступом или для форматирования табличных данных. (Табуляция и несколько пробелов не работают в HTML, потому что ширина страницы динамическая.)</p><p> Вы можете использовать абзацы с отступом — Help + Manual преобразует их в стабильные структуры HTML при публикации в форматах на основе HTML.Однако вам следует избегать использования позиций табуляции и пробелов отдельно для создания эффектов с отступом, потому что они не будут работать в выводах на основе HTML. Вы всегда должны использовать функции отступа абзаца, описанные ниже.</p><p> Для получения дополнительной справочной информации см. Табуляторы, отступы и HTML в разделе «Справочная информация».</p><p></p><table><tr><td><p> Основная информация</p><p> Вы не можете использовать инструменты отступа в одноуровневых маркированных и нумерованных списках. Чтобы изменить отступ в списке, вы должны сначала отключить список с помощью инструмента списка.В пронумерованных списках в структуре инструменты отступа изменяют уровень списка.</p></td></tr></table><table><tr><td><p> • Используйте инструменты для увеличения и уменьшения отступов.</p><p> ИЛИ:</p><p> • Нажимайте и кнопку или — для увеличения и уменьшения отступов.</p><p> ИЛИ:</p><p> • Перетащите инструмент «Отступ» на линейку над редактором. Инструмент состоит из трех частей, которые можно перетаскивать по отдельности: верхний треугольник регулирует отступ первой строки, нижний треугольник регулирует отступ основного абзаца, а квадратное поле внизу настраивает отступ первой строки и отступ абзаца вместе.</p><p> ИЛИ:</p><p> • Выберите значок в диалоговом окне абзаца и вручную установите значения отступа.</p></td></tr></table><table><tr><td><p> Висячие отступы работают во всех форматах публикации, включая форматы на основе HTML, где они преобразуются в стабильные структуры таблиц. Выступающие отступы форматируются в редакторе с помощью одной табуляции между «выступающей» частью и основным абзацем. Это единственное место, где вы должны использовать позицию табуляции для вывода в формате HTML. Используйте только одну вкладку и не добавляйте пробелов, иначе вы получите ошибки при выводе HTML.</p><p> • Используйте инструмент «Отступ» на панели инструментов, чтобы определить выступ:</p><p> ИЛИ:</p><p> • Выберите и установите значения отступа в разделе «Отступ».</p><p> См. Таблицы, отступы и HTML в разделе «Справочная информация» для получения дополнительной информации о выступах и способах их преобразования в выводе на основе HTML.</p></td></tr></table><table><tr><td><p> Вы можете установить отрицательные отступы, чтобы часть абзаца помещалась слева от нормального естественного поля страницы. Для этого введите отрицательное число, например -24, в поле «Слева:» или «Справа:» для отступов.Или просто используйте стрелку вниз рядом с полем, чтобы опуститься ниже нуля.</p><p> Это в основном полезно для вывода в PDF, DOCX и электронные книги, когда вы хотите поместить что-то вроде значка слева или справа от основного текста. Если вы примените отрицательный отступ к абзацу-контейнеру таблицы, вы можете поместить весь столбец таблицы слева или справа от обычного поля для эффекта боковой панели.</p></td></tr></table><table><tr><td><h4><span class="ez-toc-section" id="i-42"> Обычным текстом: </span></h4><p> Как правило, вы никогда не должны делать отступы для текста с ведущими пробелами, гораздо лучше использовать настоящие отступы абзацев.В HTML несколько пробелов обычно всегда интерпретируются как один пробел — Help + Manual обходит это, преобразуя несколько пробелов в чередующиеся символы мягкого и жесткого пробелов. Однако это по-прежнему может не дать нужных результатов, потому что разные браузеры могут интерпретировать ширину этих разных пробелов по-разному.</p><h4><span class="ez-toc-section" id="i-43"> В программном коде: </span></h4><p> Программный код часто имеет автоматический отступ с начальных пробелов. Чтобы это отображалось правильно, вам просто нужно отключить перенос слов в настройках абзацев примеров кода вручную или со стилем.Тогда все пробелы будут преобразованы в & nbsp; объекты жесткого пространства, которые будут правильно отображаться во всех браузерах. Абзацы не будут переноситься, но вы не хотите, чтобы абзацы переносились в программный код. Дополнительные сведения см. В разделе «Форматирование исходного кода программы».</p></td></tr></table><table><tr><td><p> В HTML отступы превращаются в таблицы. Это означает, что левая часть выступа будет завернута внутрь ячейки таблицы, если она будет слишком длинной для размещения. Если вы выводите только в форматы публикации на основе HTML, это означает, что вы можете сделать левую часть отступа сколь угодно длинной, потому что она будет переноситься в ваш вывод.</p><h4><span class="ez-toc-section" id="i-44"> Отступ в редакторе: </span></h4><p> Показывает абзац с <br/> длинным текстом в редакторе.</p><h4><span class="ez-toc-section" id="_HTML-3"> Результат в формате вывода HTML: </span></h4><p> Показывает результат в виде справки HTML <br/> или веб-справки.</p><p> Вы не можете использовать этот прием, если вы также выводите в PDF, печатные руководства или Word DOCX. Он работает только при выводе в формате HTML!</p></td></tr></table><p> См. Также:</p><p> Табуляция, отступы и HTML</p><h2><span class="ez-toc-section" id="_-_HTML_CSS"> висячих отступов на веб-странице (с HTML и CSS) | </span></h2><h3><span class="ez-toc-section" id="i-45"> Теперь у нас </span></h3><p> Целый блок текста с единым отступом.</p><blockquote><p> Гойя, Франсиско. Семья Карла IV. 1800, Музей Прадо, Мадрид. Искусство садовника сквозь века, 10-е изд. Ричарда Г. Тэнси и Фреда С. Кляйнера, Harcourt Brace, с. 939.</p></blockquote><h3><span class="ez-toc-section" id="i-46"> Потяните первую линию назад </span></h3><p> Команда text-indent не распознает строки так, как это делает текстовый процессор, и применяет отступ к тексту, как если бы это была одна длинная строка. Хороший.Вот чего мы хотим. Он только добавляет отступ к первой строке. Мы задаем ему отрицательное значение, вытягивая первую строку обратно к естественному полю, но оставляя оставшиеся строки (сколько бы их ни было) с отступом 64 пикселя, как мы сказали на последнем шаге. У нас все еще есть 4 пикселя слева, что является крошечным пространством. Вы можете попробовать его при -64 пикселя, если хотите, но если вы зайдете слишком далеко, вы можете оказаться вне экрана.</p><p></p><p><div> Гойя, Франсиско. Семья Карла IV.1800, Музей Прадо, Мадрид. Искусство садовника сквозь века, 10-е изд. Ричарда Г. Тэнси и Фреда С. Кляйнера, Harcourt Brace, с. 939.</div></p><h3><span class="ez-toc-section" id="i-47"> Теперь у нас </span></h3><p> Блок текста с отступом, первая строка на естественном поле.</p><blockquote><p> Гойя, Франсиско. Семья Карла IV. 1800, Музей Прадо, Мадрид. Искусство садовника сквозь века, 10-е изд., Ричард Г. Тэнси и Фред С.Кляйнер, Харкорт Брейс, стр. 939.</p></blockquote><h3><span class="ez-toc-section" id="i-48"> Цвет, отступ и контур </span></h3><p> Остальные три вещи, которые я добавил, являются необязательными, и я рекомендую вам настроить каждую из этих вещей по своему вкусу. Когда вы добавляете заполнение как единичное значение, оно добавляет отступ сверху, снизу, справа и слева. Я добавил значение 10 пикселей, что придает всему объекту красивый вид с мягкой подкладкой. Вот код, который дает вам заполнение вокруг:</p><h4><span class="ez-toc-section" id="_10"> отступ: 10 пикселей; </span></h4><p></p><p> Чтобы очертить рамку, я добавил черную рамку толщиной в один пиксель.Вот код, который добавляет это:</p><h4><span class="ez-toc-section" id="_1px"> граница: сплошной черный 1px; </span></h4><p> Следующим элементом, который я добавил, был цвет фона. Я сделал это, чтобы студенты могли легко выбирать цитаты на нашем сайте. Строка, которую я добавил во встроенный CSS:</p><p></p><h4><span class="ez-toc-section" id="i-49"> цвет фона: корнсилк; </span></h4><p>, но вы можете заменить cornsilk на любое из названий цветов, перечисленных в списке названий цветов X11. Я связался со списком названий цветов X11 в Википедии ниже. Кроме того, вы можете заменить слово cornsilk шестнадцатеричным кодом, шестизначным сочетанием цифр и букв, которые представляют цвета Интернета.Я также связался с шестнадцатеричным кодом для cornsilk ниже.</p><p></p><ul><li> Список удобных для Интернета названий цветов в соответствии со стандартами W3C</li></ul><ul><li> Шестнадцатеричные коды — это шестизначные числа и буквы, обозначающие веб-цвета.</li></ul><h3><span class="ez-toc-section" id="i-50"> Теперь у нас </span></h3><p> Блок текста с отступом, первая строка на естественном поле, цвет фона, 10 пикселей отступа по периметру и черная граница размером в один пиксель.</p><blockquote><p> Гойя, Франсиско.Семья Карла IV. 1800, Музей Прадо, Мадрид. Искусство садовника сквозь века, 10-е изд. Ричарда Г. Тэнси и Фреда С. Кляйнера, Harcourt Brace, с. 939.</p></blockquote><h4><span class="ez-toc-section" id="i-51"> Вот пример выступа на направляющей </span></h4><p> Графический роман LibGuide</p><h2><span class="ez-toc-section" id="i-52"> Как мне создать ярлык для блокировки отступа текущей строки, не выбирая ее? </span></h2> По умолчанию клавиша «<kbd> Tab </kbd>» может использоваться для отступа текущей строки, а опция главного меню «<q> Правка | Увеличить отступ </q>» может использоваться для отступа выбранного блока строк.При использовании клавиши «<kbd> Tab </kbd>» для отступа строки убедитесь, что курсор находится в начале строки. Отступы строк (вызываемые без выделения) и отступы блоков (вызываемые с выделением) — это две разные функции, которые можно настроить отдельно.<p></p> Если вы предпочитаете использовать один ярлык для отступа выбранных строк или текущей строки (при отсутствии каких-либо выбранных строк), параметры плагина hkBlockIndent можно назначить сочетаниям клавиш, как описано ниже.hkBlockIndent предоставляет несколько вариантов отступа для выделенного блока строк. Если выделение не найдено, hkBlockIndent выделяет строку и отступает от нее под курсором.<p></p><p></p><p> Следующие шаги можно использовать для назначения действия «<q> Действия | Документ | hkBlockIndent> Увеличить отступ (используйте настройки редактора) </q>» сочетанию клавиш, например «<kbd> Ctrl + Shift + Alt + I </kbd>».</p><ul><li> Выберите «Инструменты <q> | Настроить | Настроить сочетания клавиш </q>» в главном меню.<br/></li><li> Нажмите кнопку «<q> Добавить </q>». <br/></li><li> Нажмите клавишу (например, «<kbd> Ctrl + Shift + Alt + I </kbd>») или выберите клавишу из раскрывающегося меню в поле «<q> Сочетание клавиш </q>». <br/></li><li> Щелкните переключатель «<q> Action </q>». <br/></li><li> В раскрывающемся списке выберите «Документ> hkBlockIndent». <br/></li><li> Выберите «Увеличить отступ (использовать настройки редактора)» из второго раскрывающегося списка под ним.<br/></li><li> Нажмите кнопку «<q> Добавить </q>». <br/></li><li> Нажмите кнопку «<q> ОК, </q>», чтобы закрыть диалоговое окно «Сочетание клавиш <q> </q>». <br/></li><li> Нажмите кнопку «<q> ОК, </q>», чтобы закрыть диалоговое окно настройки «<q> Сочетания клавиш </q>».</li></ul> Нажатие «<kbd> Ctrl + Shift + Alt + I </kbd>» (или назначенного сочетания клавиш) теперь вызовет действие «Действия <q> | Документ | hkBlockIndent> Увеличить отступ (использовать настройки редактора) </q>».<p></p><p></p><p> Следующие шаги можно использовать для назначения действия «<q> Действия | Документ | hkBlockIndent> Уменьшить отступ (используйте настройки редактора) </q>» сочетанию клавиш, например «<kbd> Ctrl + Shift + Alt + D </kbd>».</p><ul><li> Выберите «Инструменты <q> | Настроить | Настроить сочетания клавиш </q>» в главном меню. <br/></li><li> Нажмите кнопку «<q> Добавить </q>». <br/></li><li> Нажмите клавишу (например, «<kbd> Ctrl + Shift + Alt + D </kbd>») или выберите клавишу из раскрывающегося меню под полем «<q> Сочетание клавиш </q>».<br/></li><li> Щелкните переключатель «<q> Action </q>». <br/></li><li> В раскрывающемся списке выберите «Документ> hkBlockIndent». <br/></li><li> Выберите «Уменьшить отступ (использовать настройки редактора)» из второго раскрывающегося списка под ним. <br/></li><li> Нажмите кнопку «<q> Добавить </q>». <br/></li><li> Нажмите кнопку «<q> ОК, </q>», чтобы закрыть диалоговое окно «Сочетание клавиш <q> </q>». <br/></li><li> Нажмите кнопку «<q> ОК, </q>», чтобы закрыть диалоговое окно настройки «<q> Сочетания клавиш </q>».</li></ul> Нажатие «<kbd> Ctrl + Shift + Alt + D </kbd>» (или назначенного сочетания клавиш) теперь вызовет действие «Действия <q> | Документ | hkBlockIndent> Уменьшить отступ (использовать настройки редактора) </q>».<h2><span class="ez-toc-section" id="_-_HTML"> Экспорт орг-режима в HTML — проблема с отступом </span></h2><p> Когда я экспортирую блок исходного кода elisp в html, отступы кода искажаются. Я пробовал позвонить <code> (setq org-src-preserve-indentation t) </code>, но это не помогло.Я полагаю, что в моем коде есть что-то, что неправильно интерпретируется <code> org-html-publish-to-html </code>?</p><p> В качестве минимального рабочего примера я пытаюсь экспортировать следующий организационный файл:</p><pre> <code> # + НАЗВАНИЕ: Тест Давайте проверим вывод html этого файла ... # + BEGIN_SRC elisp: tangle да (setq org-publish-project-alist `((" индекс " : with-title nil: base-directory "~ / website / org /" : base-extension "org": publishing-directory "~ / website / public / html /" : headline-levels 3: section-numbers ноль : функция публикации org-html-publish-to-html: with-toc nil : html-head, index-html-extra-head : html-head-include-default-style ноль : html-head-include-scripts ноль : html-preamble nil: html-postamble t))) # + END_SRC </code> </pre><p> и в результате получается следующее (обратите внимание, как код получает 4 табуляции отступа, начиная с 3-й строки):</p><p> HTML здесь, на случай, если это поможет…:</p><pre> <code> <? Xml version = "1.0" encoding = "utf-8"?> <! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml" lang = "ru" xml: lang = "en"> <head> <! - 2016-01-19 Вт 00:08 -> <meta http-Equiv = "Content-Type" content = "text / html; charset = utf-8" /> <meta name = "viewport" content = "width = device-width, initial-scale = 1" /> <title> Тест Тест
Давайте проверим вывод этого файла в формате html.
( setq org-publish-project-alist ` ( ( " индекс " : with-title nil : base-directory "~ / website / org /" : base-extension "org" : publishing-directory "~ / website / public / html /" : headline-levels 3 : section-numbers ноль : Publish-function org-html-publish-to-html : with-toc nil : html-head , index-html-extra-head : html-head-include-default-style ноль : html-head-include-scripts ноль : html-preamble nil : html-postamble t ) ) )
Emacs 25 с последней версией org-mode.