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

Содержание

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

Поддержка браузерами


12.0+	6.0+	1.0+	1.0+	3.5+	1.0+

Описание

CSS свойство margin-right устанавливает внешний отступ справа элемента. Отступом является расстояние от внешнего края правой границы текущего элемента до внутренней границы его родительского элемента либо до границы элемента, расположенного справа от него. Обратите внимание, для строчных элементов (display: inline;) могут быть установлены только внешние отступы с левой и с правой стороны.

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

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

Значение по умолчанию:	0
Применяется:	ко всем элементам, за исключением элементов, которые относятся к типу display: table-*, кроме table-caption, table и inline-table.
Анимируется:	да
Наследуется:	нет
Версия:	CSS1
Синтаксис JavaScript:	object.style.marginRight=»10px»

Синтаксис

margin-right: величина|auto|inherit;

Значения свойства

Значение	Описание
auto	Автоматическое вычисление размера поля браузером.
величина	Указывает размер поля в единицах измерения, используемых в CSS.
%	Величина, указанная в процентах, вычисляется в зависимости от ширины области содержимого родительского элемента.
inherit	Указывает, что значение наследуется от родительского элемента.

Пример

div#myBox {
background-color: red;
margin-right: auto;
}

margin-right — CSS | MDN

Свойство CSS margin-right устанавливает внешний отступ справа от элемента. Положительное значение увеличивает расстояние между соседними элементами, тогда как отрицательное — сокращает.

Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте https://github.com/mdn/interactive-examples и отправьте нам пулреквест.

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


margin-right: 20px;  
margin-right: 1em;   
margin-right: 5%;    


margin-right: auto;


margin-right: inherit;
margin-right: initial;
margin-right: unset;

Свойство margin-right может быть выражено как ключевое слово auto, как <число>, или как <процент>. Значение может быть положительным, нулевым или отрицательным.

Значения

<length>

Размер отступа — фиксированная величина.

<percentage>

Размер отступа в процентах — размер относительно длины родительского блока.

auto

Внешний отступ слева получает долю неиспользованного горизонтального пространства, определяется в основном выбранным способом разметки. Если значения margin-left и margin-right одновременно установлены как auto, расчётное пространство распределяется равномерно. Эта таблица кратко излагает различные:

Значение `display`	Значение `float`	Значение `position`	Расчётное значение `auto`	Комментарий
`inline`, `inline-block`, `inline-table`	любое	`static` или `relative`	`0`	Строчный способ разметки
`block`, `inline`, `inline-block`, `block`, `table`, `inline-table`, `list-item`, `table-caption`	любое	`static` или `relative`	`0`, кроме случаев, когда `margin-left` и `margin-right` установлены как `auto`. В этом случае устанавливается значение, центрирующее элемент внутри его родителя	Блочный способ разметки
`block`, `inline`, `inline-block`, `block`, `table`, `inline-table`, `list-item`, `table-caption`	`left` или `right`	`static` или `relative`	`0`	Блочный способ разметки (плавающие элементы)
любое `table-`, кроме* `table-caption`	любое	любое	`0`	Внутренние `table-*` элементы не имеют отступов, вместо этого используйте `border-spacing` (en-US)
любое, кроме `flex`, `inline-flex`, или `table-*`	любое	`fixed` или `absolute`	`0`, кроме случаев, когда `margin-left` и `margin-right` установлены как `auto`. В этом случае, устанавливается значение центрирующее границы области внутри доступной `width` (ширины), если значение фиксировано.	Способ разметки абсолютным позиционированием
`flex`, `inline-flex`	любое	любое	`0`, кроме случаев, когда есть положительное горизонтальное свободное пространство. В этом случае, распределяется равномерно по всем горизонтальным `auto` отступам.	Способ разметки с помощью flexbox

Формальный синтаксис

.content { margin-right: 5%; }
.sidebox { margin-right: 10px; }
.logo    { margin-right: -5px; }

BCD tables only load in the browser

right | HTML и CSS с примерами кода

Свойство margin-right

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

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

Блоки

Синтаксис

/* <length> values */
margin-right: 20px; /* An absolute length */
margin-right: 1em; /* relative to the text size */
margin-right: 5%; /* relative to the nearest block container's width */

/* Keyword values */
margin-right: auto;

/* Global values */
margin-right: inherit;
margin-right: initial;
margin-right: unset;

Значения

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

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

Значение по-умолчанию:

Применяется ко всем элементам

Спецификации

Описание и примеры

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>margin-right</title>
    <style>
      body {
        margin-right: 25%; /* Отступ справа */
        margin-left: 25%; /* Отступ слева */
      }
      .panel {
        background: #007083; /* Цвет фона */
        color: white; /* Цвет текста */
        padding: 10px; /* Поля вокруг текста */
        text-align: justify; /* Выравнивание по ширине */
      }
    </style>
  </head>
  <body>
    <div>
      Весьма существенно следующее: аллегория монотонно
      иллюстрирует невротический холерик, таким образом,
      второй комплекс движущих сил получил разработку в
      трудах А.Берталанфи и Ш.Бюлера.
    </div>
  </body>
</html>

Свойство margin

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

Варианты записей отступов в CSS


margin : auto;
margin : 0px;
margin : 1px 2px;
margin : 0px 6px 4px;
margin : 0px 3px 6px 9px;

auto – данная опция задаёт автоматический расчёт размеров отступов.

0px – по всему периметру элемента отступ будет иметь нулевое значение.

1px 2px – 1px = верх и низ. 2px = лево и право.

0px 6px 4px – 0px = верх. 6px = лево и право. 4px = низ.

0px 3px 6px 9px – 0px = верх. 3px = право. 6px = низ. 9px = лево. (По часовой стрелке)

Свойства отступов по всем сторонам

Свойство margin определяет величину отступа по всем сторонам.

	
margin : 10%;
margin : 20px;
margin : auto;


HTML

<div>
  <div>
    Отступы по всем сторонам
  </div>
</div>


CSS

.container {
    display: inline-block;
    background-color: #f00;	
}
.box {
    margin: 20px;
    padding: 20px;
    border: 4px solid #000;
    background-color: #fc0;
}

Свойства отступов по отдельным сторонам

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

Отступ сверху и снизу


margin: 20% 0%;
margin: 20px 0px;
margin: auto 0px;

Отступ слева и справа


margin: 0% 20%;
margin: 0px 20px;
margin: 0px auto;

Верх / лево и право / низ


margin: 0px 10px 20px;
margin: 0% 10% 20%;

Отступы по часовой стрелке


margin : 0px 10px 20px 30px;

Отступ сверху

Свойство margin-top определяет величину отступа по верхнему краю элемента.

		
margin-top : 10%;
margin-top : 20px;
margin-top : auto;

Отступ слева

Свойство margin-left определяет величину отступа по левому краю элемента.


margin-left : 10%;
margin-left : 20px;
margin-left : auto;

Отступ справа

Свойство margin-right определяет величину отступа по правому краю элемента.


margin-right : 10%;
margin-right : 20px;
margin-right : auto;

Отступ снизу

Свойство margin-bottom определяет величину отступа по нижнему краю элемента.


margin-bottom : 10%;
margin-bottom : 10px;
margin-bottom : auto;

Отступ от правого края html. Как в HTML сделать отступы для текста и картинок

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

Отступы задаются параметрами margin и padding . Наличия двух атрибутов вместо одного требуют интересы разных браузеров, margin — Internet Эксплорер, а padding — Опера и Файер фох. Совмещение разных параметров гарантирует, что показываться web-страница в разных браузерах будет одинаково.

Управлять отдельными отступами от разных краев экрана можно с помощью параметров margin-top , margin-bottom , margin-right и margin-left , которые соответственно изменяют расстояние от верхнего, нижнего, правого и левого края окна браузера. Прежде чем их использовать, следует задать нулевое значение параметрам margin и padding (пример 1).

Пример 1. Изменение верхнего отступа от края браузера

Отступы на странице

Селектор BODY , к которому применяется стиль, задает отступы на всей web-странице целиком. То же можно сделать и применительно к отдельным элементам, например, заголовкам (пример 2).

Пример 2. Изменение отступов у заголовка

Отступы на странице

Одновременно использовать параметры margin и padding в данном случае уже необязательно.

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

Пример 3. Использование атрибута margin

Отступы у параграфа

Основной контент

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

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

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

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

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

Существует несколько способов задания этих стилей. Например, непосредственно указать размер всех полей или отступов одним аргументом в какой-нибудь единице измерения (px, ex, em, pt, cm и так далее):

padding : 3px ; margin : 3px ;

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

padding : 3px 5px ; margin : 3px 5px ;

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

padding : 3px 5px 2px ; margin : 3px 5px 2px ;

первый — поле/отступ сверху, второй — одновременно слева и справа, третий — снизу. При четырех аргументах:

padding : 3px 5px 2px 6px ; margin : 3px 5px 2px 6px ;

первый — поле/отступ сверху, второй — справа, третий — снизу, четвертый — слева. Легко запомнить: первый — сверху, далее по часовой стрелке. Кроме того, можно задавать поля и отступы для конкретного края отдельно, с помощью соответствующих стилей: padding-top , padding-right , padding-bottom , padding-left , margin-top , margin-right , margin-bottom , margin-left . Значением этих стилей может быть только один аргумент, задающий величину поля/отступа для данной стороны.

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

padding : 5px ;

В результате страница изменит вид к следующему:

Рассмотрим теперь отступы. Две таблицы примыкают друг к другу, если мы хотим их немного раздвинуть, можно применить отступы. Тут есть два варианта: либо задать нижний отступ первой таблицы, либо верхний отступ второй таблицы. Давайте воспользуемся вторым:

margin-top : 5px ;

Заметьте, что отступ мы задаем именно таблице, а не ячейке таблицы, как в случае с полями. Вот результат:

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

HTML-код подопытной страницы:

html > head > title > Тест/ title > meta http-equiv = «Content-Type» content = «text/html;charset=utf-8» > / head > body > style > table {width: 200px; height: 150px; border: 1px solid #555; border-collapse: collapse} td {vertical-align: top; padding: 0px} div {width: 100px; height: 100px; background: red} / style > table style = «background: lime» > tr > td style = «padding: 5px» > div style = «margin: 0px» > / div > / td > / tr > / table > table style = «background: skyblue; margin-top: 5px» > tr > td > / td > / tr > / table > / body > / html >

Здравствуйте, уважаемые читатели блога сайт! Сегодня мы продолжим изучение каскадных таблиц стилей или CSS. В прошлых статьях мы уже рассмотрели в общих чертах блочную верстку сайта. В результате у нас стали получаться вполне профессиональные web-страницы, но чего-то им не хватает. А не хватает им скорей всего отступов и рамок. Сегодня мы и займемся рассмотрением стилевых правил margin, padding и border, которые позволяют задавать отступы и рамки для html-элементов.

Параметры отступов в CSS

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

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

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

Для наглядности картинка:

Например, рассмотрим ячейку заполненную текстом. Тогда внутренний отступ это расстояние между воображаемой границей ячейки и содержащимся в ней текстом. А внешний отступ это расстояние между границами соседних ячеек. Начнем с внутренних отступов.

Внутренние отступы в CSS с помощью padding (top, bottom, left, right)

Свойства стиля padding-left, padding-top, padding-right и padding-bottom позволяют задать величины внутренних отступов, соответственно, слева, сверху, справа и снизу элемента web-страницы:

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

Например, для текущего абзаца я применил правило стиля, задающий левый отступ 20 пикселей, верхний отступ 5 пикселей, справа отступ 35 пикселей и снизу 10 пикселей. Запись правила в будет выглядеть следующим образом:

p.test{
padding-left:20px;
padding-top:5px;
padding-right:35px;
padding-bottom:10px
}

Сборное правило padding позволяет указать отступы сразу со всех сторон элемента веб-страницы:

padding: [ [ []]]

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

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

Таким образом правило CSS приведенное выше можно максимально сократить и записать следующим образом:

p.test{ padding:5px 35px 10px 20px}

Свойство margin или внешние отступы в CSS

Атрибуты стиля margin-left, margin-top, margin-right и margin-bottom позволяют задать величины внешних отступов, соответственно, слева, сверху, справа и снизу:

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

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

p {
margin-left: 20px;
}
h2{
margin-right:15%;
}

Значение auto означает, что размер отступов будет автоматически рассчитан браузером. В случае использования процентной записи, то отступы рассчитываются в зависимости от ширины родительского контейнера . Причем это относится не только к margin-left и margin-right, но и для margin-top и margin-bottom отступы в процентах будут рассчитываться в зависимости от ширины, а не высоты контейнера.

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

p{
margin-left:-20px;
}

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

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

margin: [ [ []]]

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

Параметры рамки с помощью свойства border

При настройке рамок существует три типа параметров:

border-width — толщина рамки;
border-color — цвет рамки;
border-style — тип линии с помощью которой будет нарисована рамка.

Начнем с параметра толщины рамки:

border-width: [значение | thin | medium | thick] {1,4} | inherit

Толщину рамки можно задавать в пикселях, либо в других доступных в css единицах. Переменные thin, medium и thick задают толщину рамки в 2, 4 и 6 пикселей соответственно:

border-width:medium;

Как и для свойств padding и margin, для параметра border-width разрешается использовать одно, два, три или четыре значения, задавая таким образом толщину рамки для всех сторон сразу или для каждой по отдельности:

border-width: 5px 3px 5px 3px

Для текущего абзаца сделаем толщину верхней рамки 1px, правой 2px, нижней 3px, а левой 4px с помощью правила {border-width: 1px 2px 3px 4px;}

С помощью атрибутов стиля border-left-width, border-top-width, border-right-width и border-bottom-width можно задавать толщину, соответственно, левой, верхней, правой и нижней сторон рамки:

border-left-width|border-top-width|border-right-width|border-bottom-width: thin|medium|thick||inherit

Следующий параметр border-color с помощью которого можно управлять цветом рамки :

border-color: [цвет | transparent] {1,4} | inherit

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

p {border-width: 2px; border-color: red}

Значение transparent устанавливает прозрачный цвет рамки, а inherit наследует значение родителя. По умолчанию, если цвет рамки не задан, то будет использоваться тот, который используется для шрифта внутри данного элемента.

С помощью атрибутов стиля border-left-color, border-top-color, border-right-color и border-bottom-color можно задать цвет, соответственно, левой, верхней, правой и нижней сторон рамки:

border-left-color|border-top-color|border-right-color|border-bottom-color: transparent||inherit

И последний параметр border-style задает тип рамки :

border-style: {1,4} | inherit

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

Атрибуты стиля border-left-style, border-top-style, border-right-style и border-bottom-style задают стиль линий, которыми будет нарисована, соответственно, левая, верхняя, правая и нижняя сторона рамки:

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

border: | inherit

Значения могут идти в любом порядке, разделяясь пробелами:

td {border: 1px solid yellow}

Для установки границы только на определенных сторонах элемента существуют свойства border-top, border-bottom, border-left, border-right, которые позволяют задать параметры соответственно для верхней, нижней, левой и правой стороны рамок.

Осталось только подвести итоги:

для задания внутренних отступов пользуемся свойством padding ;
для настройки внешних отступов существует правило margin ;
параметры рамок задаются с помощью атрибута border .

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

На этом все, до новых встреч!

Блочная верстка частенько используется при создании сайта или блога. Как следствие этого — часто требуется делать отступы у блоков. По этой причине о том, как сделать отступы в 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 — внешние отступы. Также, как вы уже знаете, способов задания отступов существует несколько, можно их использовать.

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

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

Основные правила позиционирования

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

Особое значение имеет отступ сверху. CSS внутри блока связывает правила внутренних отступов с правилами абсолютно и относительно позиционированных элементов внутри этого блока.

Обычная практика CSS-правил: можно указать отступы со всех сторон одинаково, попарно сверху/снизу и справа/слева либо для каждой стороны отдельно. Например,

margin: 10px;
padding: 10px20px;
padding: 10px20px30px40px.

В первом случае устанавливается отступ элемента от сторон внешнего контейнера, в котором он находится. Во втором случае отступы сверху и снизу равны 10px, слева и справа — 20px. В третьем случае указаны размеры отступов по всем сторонам: сверху, справа, снизу и слева.

Во всех указанных случаях отступ сверху CSS равен 10 px.

Правила, изменяющие положение элементов

Если элемент верстки не позиционирован абсолютно, он располагается в общем порядке формирования страницы.

Если определить отступ сверху CSS в элементе scCurrInfo, цель будет достигнута, а если на уровне li — нет.

В данном примере использование правила padding: 40px; требует адекватного уменьшения правил width и height на 80px. В противном случае размер блока scCurrInfo вылезет за границы внешнего блока.

Если убрать правило padding из описания scCurrInfo, но добавить его со значением 20px в описание стиля элемента списка, получим только отступ сверху. CSS не применит это значение к другим сторонам.

Естественно, такое использование правила отступа относится к каждому элементу li.

Общая практика форматирования контента

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

Свобода, свойственная блочной верстке, завораживает, и воображение разработчика может не ограничиваться строгими табличными правилами: только ряды, только ячейки, слияние только по горизонтали и вертикали. Ничего не свойственного реляционным идеям.

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

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

Абсолютное позиционирование

Блок с правилом POSITION: absolute ; будет находится в месте, установленном его координатами относительно блока, в котором он находится.

Характерная черта правил CSS — «практика — лучший критерий истины» в большинстве случаев, особенно когда требуется кроссбраузерность и верстка производится вручную, предпочтительнее изучения полноценных мануалов по каскадным таблицам стилей.

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

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

html — отступ справа: 20 пикселей; к изображению в электронном письме Outlook

Это работает в Gmail и Mobile Exchange, но НЕ в Outlook 2010 (хотя заполнение должно работать в 2010 году?) .

<img src="http://coolguys.org/signature/georgeWcool.jpg" alt="Cool logo">

С блоком отображения или без него вышеперечисленное полностью игнорируется в Outlook. И просто результат с текстом рядом с ним, который врезается прямо в край изображения. Опять же, отлично справляется с Gmail и Mobile Exchange.

У меня есть текст справа от этого изображения, поэтому использование:   — очень беспорядочный вариант. Есть другие похожие идеи? (аналогично = работает в большинстве мест)

Обновление для @Mike « еще кода » ниже:

<tr>
        <td><img src="http://coolguys.org/signature/georgeWcool.jpg" alt="Cool logo"></td>
        <td>
            <span>
            This one time at band camp Lorem Ipsum</span><br>
            <span>Jeepers HTML emails suck lorem ipsum<br>
            </span>
            <br>
            <!-- etc -->

fred randall 16 Июл 2015 в 22:46

2 ответа

Лучший ответ

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

У вас также есть еще один вариант — задать ширину ячейки таблицы обертывания. Эта ширина должна быть равна ширине изображения + 20 пикселей, чтобы учесть отступы. Тогда вам не понадобится набивка. Очевидно, это работает только в том случае, если у вас есть четко определенная ширина для рабочей ширины, которой у вас нет, судя по тому, что я вижу в вашем HTML. Если ваш элемент всегда будет одной ширины, добавьте ширину в тег Image. Таким образом, вторая ячейка таблицы с текстом будет занимать остальное доступное пространство в этой таблице и всегда будет на 20 пикселей справа от вашего изображения

fred randall 16 Июл 2015 в 20:29

Используйте отступы в тегах td в Outlook. Заполнение не поддерживается в тегах Img или div. Посетите http: //www.campaignmonitor/css, чтобы узнать больше о совместимости CSS в почтовых клиентах.

Gortonington 7 Июн 2017 в 13:02

Отступ от верха css. Изучаем отступы текста в html. Padding и border — внутренние отступы и рамки

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

Поля и отступы: в чём разница?

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

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

Свойство margin

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

margin: 12px.

Такая строчка означает, что вокруг блока текста (или любого другого блока) со всех сторон будет сделан отступ в 12 пикселей. Чтобы увеличить промежуток, например, в три раза, достаточно записать:

margin: 36px.

Но что делать, если интервал между блоками должен быть разный с каждой стороны? Разработчики веб-страниц используют несколько форм записи:

margin: 11px 22px.
margin: 11px 22px 33px.
margin: 11px 22px 33px 44px.

В первом примере от нижней и верхней границ блока будут сделаны отступы по 11 пикселей, по бокам блока — по 22 пикселя. Согласно второй форме записи, между верхним краем блока и контентом будет 11 пикселей, между нижним — 33 пикселя, по бокам — по 22 пикселя. В третьем случае отступ будет иметь значение 11 пикселей сверху, 22 пикселя справа, 33 пикселя снизу и 44 пикселя слева.

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

margin-right: 22рх.

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

Свойство margin имеет особенность, которую должен помнить разработчик, когда использует отступ текста CSS по вертикали. Интервалы соседних элементов не суммируются, а налагаются друг на друга. Например, пусть один из блоков имеет margin-bottom: 15px , а примыкающий к нему снизу блок margin-top: 35px . Школьная арифметика и здравый смысл подсказывают, что общий отступ между ними будет 50 пикселей. На практике это не так. Блок с большим значением свойства margin «поглотит» своего соседа. В итоге интервал между элементами будет 35 пикселей.

«Красная» строка

Оформляя документ в текстовом редакторе, пользователи предпочитают задавать каждый новый абзац с помощью «красной» строки. С помощью CSS отступ текста слева несложно сделать — используется конструкция text-indent . Записывается она так:

text-indent: 11px.

То есть первая строка абзаца будет сдвинута относительного левого края на 11 пикселей. Чтобы текст на веб-странице больше походил на документ в редакторе, следует дополнительно установить то есть записать:

text-indent: 11px;

text-align: justify.

Помимо пикселей, при описании разметки допускается использование других единиц — дюймов, пунктов, процентов. Пусть блок имеет отступ текста CSS, равный 10%. При ширине блока, равной 500 пикселям, красная строка будет составлять 50 пикселей (10% от 500).

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

text-indent: inherit.

Удивительно, но может принимать и отрицательные значения! В этом случае формируются так называемые выступы, то есть основной текст остаётся на месте, а первая строка смещается влево на 22 пикселя:

text-indent: -22px.

Чтобы буквы не перешли за левую границу браузера, дополнительно к text-indent нужно использовать конструкцию для задания поля:

padding-left: 22px.

Основные свойства CSS для рассмотрены. А закрепить их поможет практика. Вот несколько заключительных советов, как применять изученный материал при разработке веб-сайтов:

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

padding : 3px ; margin : 3px ;

padding : 3px 5px ; margin : 3px 5px ;

padding : 3px 5px 2px ; margin : 3px 5px 2px ;

первый — поле/отступ сверху, второй — одновременно слева и справа, третий — снизу. При четырех аргументах:

padding : 3px 5px 2px 6px ; margin : 3px 5px 2px 6px ;

padding : 5px ;

В результате страница изменит вид к следующему:

margin-top : 5px ;

Заметьте, что отступ мы задаем именно таблице, а не ячейке таблицы, как в случае с полями. Вот результат:

HTML-код подопытной страницы:

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

Рассмотрим основные свойства управления отсутпами.

Управление внешними отсупами в HTML на CSS при помощи свойства margin

Свойство css margin позволяет управлять именно внешними отступами . Допустим имеется изображение, для которого нужно указать внешние отсупы: 30 пикселей сверху, 20 слева, 10 справа и 5 снизу.

Для задания отсупа сверху мы пропишем: margin-top: 30px

Для задания отступа слева: margin-left: 30px

Отступ справа: margin-right: 10px

И снизу: margin-bottom: 5px

Можно все объединить, прописав следующее: margin: 30px 10px 5px 20px;

Например зададим эти отступы для изображения. Получаем следующий html код:

На видно как изображение сместилось относительно родительского элемента.

Если же прописать margin: 30px, то отступы css будут одинаковые со всех четырех сторон и будут равны 30 пикселям.

Есть варианты указания двух и трех значений в спецификации: margin:10px 20px;. Данный параметр сделает так, что появятся внешние отступы на css сверху и снизу 10px, слева и справа 20px;

Часто для начинающих верстальщиков не всегда получается сразу запомнить все возможные комбинации, поэтому на начальных этапах можно использовать параметры: margin-top, margin-right, margin-left и margin-bottom. Top — вверх, right-право, left-лево, bottom-снизу.

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

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

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

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

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

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

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

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

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

Возможные значения margin и padding.

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

Вот примеры:

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

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

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

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

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

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

Осмысливая мысли в смысле смысла, есть смысл помыслить о немыслимом!

Дочерние свойства margin и padding.
Свойства CSS margin и padding являются базовыми и имеют ряд дочерних свойств.
У margin зто:
margin-top — Поле от верхней границы элемента родителя,
margin-left — Поле от левой границы элемента родителя,
margin-right — Поле от правой границы элемента родителя,
margin-bottom — Поле от нижней границы элемента родителя.
И у padding соответственно:
padding-top — Отступ от верхней границы элемента до его содержания,
padding-left — Отступ от левой границы элемента до его содержания,
padding-right — Отступ от правой границы элемента до его содержания,
padding-bottom — Отступ от нижней границы элемента до его содержания.
Ну думаю понятно.. если возникает необходимость определить отступ или поле от одной единственной стороны элемента лучше воспользоваться одним из вышеперечисленных свойств.

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

Осмысливая мысли в смысле смысла, есть смысл помыслить о немыслимом!

Мало кто знает, как много надо знать, для того чтобы знать, как мало мы знаем!

Поля и отступы являются одними из основных составляющих дизайна сайта, по этому поводу следует придерживаться нескольких рекомендаций.
Избегайте коротких, и уж тем более, нулевых отступов от содержимого к границам элемента, особенно это касается текстовых блоков. Текст с маленькими полями и отступами читается трудно и «вязко».
Соблюдайте правила пропорциональности и соизмеримости полей и отступов как для отдельно взятого элемента, так и для всей страницы (композиции элементов) целиком.
Один из способов акцентирования внимания посетителя страницы на нужном Вам месте — это отступы размером больше обычного, такой контраст заставит зрителя смотреть и проявить внимание к «особым» местам в тексте..
Задача
Убрать отступы вокруг маркированного или нумерованного списка.
Решение
Используйте стилевое свойство margin и padding с нулевым значением для селектора UL или OL , в зависимости от типа списка, как показано в примере 1.
Пример 1. Отступы в списке
HTML5 CSS 2.1 IE Cr Op Sa Fx
Отступы в списке
Чебурашка
Крокодил Гена
Шапокляк
Результат данного примера показан на рис. 1.
Рис. 1. Список без вертикальных и горизонтальных отступов
Обратите внимание, что исчезают маркеры списка, которые оказываются за левым краем веб-страницы. Чтобы убрать только верхний и нижний отступ, не сдвигая при этом список влево, используйте свойства margin-top и margin-bottom (пример 2).
Пример 2. Отступы в списке
HTML5 CSS 2.1 IE Cr Op Sa Fx
Отступы в списке
Чебурашка
Крокодил Гена
Шапокляк
Поделиться с друзьями:
Похожие публикации

горизонтальных вкладок

горизонтальных вкладок Разрешенный контекст: % текст
Модель содержимого: Пусто!

Элемент TAB можно использовать, если вам нужен точный контроль над горизонтальное позиционирование. Элемент TAB используется с вкладкой < id = name > атрибут для определения именованных позиций табуляции. Впоследствии вы можете использовать элемент TAB с вкладкой < to = name > attribute для перехода к ранее определенной вкладке останавливаться. Такой подход позволяет избежать необходимости знать метрики шрифта в продвигать.Элемент TAB вместе с таблицами стилей позволяет преобразовывать программное обеспечение для сохранения макетной информации при импорте документов созданный с помощью обычного программного обеспечения для обработки текстов.

Например:

нокт амбулаторный - ходьба ночью
(от латинского: nox noctis ночь + ambulare прогулка)

, который отображается как:

  noctambulant  - ходьба ночью
    (от латинского:  nox noctis  night +  ambulare  walk)

Имя позиции табуляции (в примере t1 ) должно быть уникальным в пределах текущий документ и состоит из начальной буквы, за которой следует буквы, цифры или дефисы.

Иногда вы хотите, чтобы оставшаяся часть линии была промыта, пока оставив предыдущие слова неизменными. Это возможно с align атрибут. Например:

 Левая часть строки  и правая часть строки.

, который отображается как:

 Левая часть строки и правая часть строки.

Разрешенные атрибуты

ID

Идентификатор SGML, используемый для обозначения новой позиции табуляции в текущей позиции.Область действия табуляции — это остальная часть документа.

INDENT

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

TO

Задает ранее определенную позицию табуляции (см. Атрибут ID).

ALIGN

Линии обычно отображаются в соответствии с выравниванием вариант для включающего элемента абзаца. Атрибут ALIGN может быть используется для явного указания горизонтального выравнивания:

align = left: Следующий текст начинается сразу после обозначенная позиция табуляции (по умолчанию).
align = center: Следующий текст до следующей табуляции или разрыва строки по центру указанной позиции табуляции. Если атрибут TO отсутствует, он центрирует текст между текущими левым и правым полями.
align = right: Следующий текст до следующей табуляции или разрыва строки отображается вплотную к указанной позиции табуляции. Если атрибут TO равен отсутствует, он отображает текст на одном уровне с текущим правым поле.
align = decimal: Выполняется поиск первого текста в следующем тексте. появление символа, представляющего десятичную точку. Текст вверх к следующей табуляции или разрыв строки затем выравнивается так, чтобы десятичная точка начинается с указанной позиции табуляции.Если атрибут TO отсутствует, Элемент табуляции обрабатывается как одиночный пробел.

DP

Определяет символ, который будет использоваться для десятичной дроби. точка с атрибутом ALIGN, например dp = «.» (по умолчанию) или dp = «,». Значение по умолчанию может быть изменено языковым контекстом, установленным LANG. атрибут на вмещающих элементах.

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

Как следует переписать вышесказанное для работы с языками, которые рендерится справа налево? А как насчет линий со смешанными направлениями?

Выравнивание, выравнивание и отступ | Компьютерные приложения для менеджеров

Цели обучения

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

Выравнивание

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

Выравнивание — это то, как текст перемещается по отношению к остальной части страницы (или столбцу, ячейке таблицы, текстовому полю и т. Д.). Существует четыре основных варианта выравнивания: по левому краю, по правому краю, по центру и по ширине.

Выровненный по левому краю текст — это текст, выровненный по левому краю.
Текст с выравниванием по правому краю — это текст с выравниванием по правому краю.
Текст по центру — это текст, расположенный по центру между двумя краями.

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

Необоснованный текст	Обоснованный текст

Вы также можете изменить настройки выравнивания и выравнивания в диалоговом окне абзаца.

Диалоговое окно абзаца: выравнивание и выравнивание

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

Выпадающее меню для изменения выравнивания находится в верхней части диалогового окна.

Углубление

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

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

Одна табуляция в начале первой строки абзаца.

Для большего контроля над настройками отступа используйте диалоговое окно абзаца.

Диалоговое окно абзаца: отступ

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

Область отступа находится ближе к середине диалогового окна.

Параметры «Влево» и «Вправо» позволяют сдвинуть весь абзац вправо и влево.

Сравнение отпечатков
Без выемки
С отступом 1 дюйм слева и справа

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

Вешалка

Отступ первой строки

Регулировка выравнивания текста: Только IU: Файлы: Документы Google: Основы: Все темы обучения: Библиотека материалов обучения ИТ UITS: Университет Индианы

Регулировка полей

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

Если линейка не видна, вы можете легко это изменить.

Шаг 1. При необходимости включите линейку.

Чтобы при необходимости включить линейку в строке меню,
Нажмите «Просмотр», нажмите «Показать линейку».

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

Диалоговое окно «Параметры страницы» позволяет настроить поля, размер бумаги, источник бумаги и макет документа.Корректировки можно применить к определенным частям документа, выделив фрагменты текста перед открытием диалогового окна «Параметры страницы».

Параметры настройки страницы находятся в меню «Файл».

Шаг 2. Откройте диалоговое окно Параметры страницы.

Чтобы открыть диалоговое окно Параметры страницы в строке меню,
Щелкните Файл, щелкните Параметры страницы

Откроется диалоговое окно Параметры страницы :

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

Шаг 3. Отрегулируйте левое и правое поля до 0,5 дюйма.

Для настройки левого поля в левом поле
Дважды щелкните значение, введите: .5 Tab
Чтобы настроить правое поле, введите:
.5 Введите

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

При наведении указателя мыши на серую область, обозначающую поле, мы видим всплывающую подсказку, которая сообщает нам, что это левое поле, а также двустороннюю стрелку, указывающую, что поле можно перемещать:

Шаг 4. С помощью линейки отрегулируйте поля до 1 дюйма.

Чтобы отрегулировать левое поле на линейке,
Нажмите и перетащите левое поле на 1.00 дюймовая отметка
Линейка выглядит так:
Чтобы отрегулировать правое поле на линейке,
Нажмите и перетащите правое поле до отметки 6,50 дюйма
Линейка выглядит следующим образом:

Поля были возвращены к исходным 1 дюйму с каждой стороны.

Регулировка отступов абзацев

При работе в Google Docs мы можем использовать клавишу табуляции для отступа первой строки абзаца. Однако при использовании отступа вся левая часть выделенного фрагмента текста перемещается вправо.Либо табуляция, либо отступ изменят внешний вид линейки.

Позже в этих материалах мы увеличим визуальное воздействие вводного абзаца, добавив изображение. А пока давайте освободим место для изображения, используя кнопку «Увеличить отступ» в Документе Google, чтобы сделать отступ для первого абзаца. Кнопка «Увеличить отступ» изменит отступ выбранного абзаца с шагом 0,5 дюйма.

Шаг 1. Перейти к первому абзацу документа.

Для перехода к первому абзацу, если необходимо,
прокрутите до начала документа

Шаг 2.Поместите курсор в первый абзац.

Чтобы поместить курсор в первый абзац,
Щелкните первый абзац

Шаг 3. Сделайте отступ абзаца 1,5 дюйма.

Чтобы сделать отступ для первого абзаца на панели инструментов,
Щелкните три раза

Абзац с отступом, и теперь есть место для добавления изображения.

Добавление выступа

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

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

Шаг 1. Перейдите в раздел «Источники» документа.

Чтобы перейти в раздел Источники,
Прокрутите до конца документа

Шаг 2. Поместите курсор в текст первого источника.

Чтобы переместить курсор к первому источнику,
Щелкните первый источник

Шаг 3.Откройте диалоговое окно «Параметры отступа».

Чтобы открыть диалоговое окно «Параметры отступа» в строке меню,
Щелкните Формат, укажите для выравнивания и отступа, щелкните Параметры отступа

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

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

Шаг 4. Установите a.5-дюймовый висячий отступ.

Для установки выступа в разделе Особый отступ,
Щелчок, Вывешивание щелчка
По умолчанию отступ составляет 0,5 дюйма. Это то, что мы хотим.
Чтобы нанести выступ 0,5 дюйма,
Щелкните

Первый источник теперь правильно отформатирован. Мы могли бы выполнить описанные выше шаги для индивидуального форматирования каждого источника. Вместо этого давайте выберем оставшиеся источники и применим отступ к ним всем одновременно.

Шаг 5. Выберите оставшиеся источники.

Чтобы выбрать остальные источники,
Нажмите и перетащите оставшиеся источники

Шаг 6. Примените выступ к выбранным источникам.

Чтобы открыть диалоговое окно «Параметры отступа» в строке меню,
Щелкните Формат, укажите для выравнивания и отступа, щелкните Параметры отступа
Чтобы установить выступ, в разделе Специальный отступ,
Щелкните, щелкните «Подвешивание»
Чтобы применить расширение.5-дюймовый висячий отступ,
Щелкните

Шаг 7. Снимите выделение с текста.

Чтобы отменить выделение текста,
Щелкните пустую область документа

Исходные тексты теперь имеют правильный отступ и могут занимать две страницы:

Табуляция за правым полем (Microsoft Word)

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

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

При настройке документа вы указываете поля для этого документа. Эти поля определяют размер вашего текстового блока. В случае с Пипом нас интересует ширина текстового блока, которая определяется левым и правым полями.Если ширина вашей бумаги составляет 8,5 дюйма, а ваше левое и правое поля — 1,25 дюйма, то ширина вашего текстового блока составляет 6 дюймов. (Это вычисляется по формуле 8,5 — 1,25 — 1,25 = 6.) Вы не можете размещать объекты за пределами этого текстового блока, за исключением специальных элементов, таких как текстовые поля. Word позволяет установить позицию табуляции за пределами этого текстового поля, но не позволяет выровнять текст по этой позиции табуляции.

Здесь в игру вступает правый отступ. Word позволяет вам установить правый отступ, который складывается с правым полем.Эти отступы устанавливаются для определенных абзацев. Например, если у вас есть абзац с отступом справа в 1 дюйм, он добавляется к правому полю, и текст внутри этого абзаца будет вести себя так, как если бы с правой стороны документа оставалось 2,25 дюйма белого пространства.

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

Допустим, у вас есть абзац, в котором вы хотите немного текста, часть его длинного, и вы хотите, чтобы ваши поля составляли 1,25 дюйма слева и справа. В последней строке вам нужна выноска с точками, выровненная по правому краю табуляция, выходящая за правое поле абзаца на 6,25 дюйма. Вы можете настроить поля и абзац таким образом, и табуляция будет отображаться на линейке справа от вашего правого поля. Однако текст с вкладками не выходит за пределы правого поля. (См. Рисунок 1.)

Рисунок 1. Текст не выходит за пределы правого поля документа.

Интересно, что вы можете настроить отступ в абзаце так, чтобы он составлял 1 дюйм от правого поля, но это не помогает в вашей ситуации. Ваш текст с вкладками по-прежнему не выходит за пределы этого правого поля. Фактически, он даже не переместится на правое поле, а остановится на правом отступе абзаца. (См. Рисунок 2.)

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

Решением этой проблемы является сохранение правого отступа для абзаца, но перемещение позиции табуляции так, чтобы она не выходила за пределы правого поля. Он может выходить за пределы отступа, но не за правым полем. Например, вы можете установить позицию табуляции на 6 дюймов, что равно ширине текстового блока и, следовательно, только у правого поля документа. Однако отступ абзаца по-прежнему установлен на 1 дюйм, так что текст в абзаце растягивается на 5 дюймов. (См. Рисунок 3.)

Рисунок 3. Текстовые табуляторы за правым отступом очень хорошо.

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

WordTips — ваш источник экономичного обучения работе с Microsoft Word. (Microsoft Word — самая популярная программа для обработки текстов в мире.) Этот совет (828) применим к Microsoft Word 2007, 2010, 2013, 2016, 2019 и Word в Office 365.

Автор Биография

Аллен Вятт

Аллен Вятт — всемирно признанный автор, автор более чем 50 научно-популярных книг и многочисленных журнальных статей. Он является президентом Sharon Parq Associates, компании, предоставляющей компьютерные и издательские услуги.Узнать больше о Allen …

Общие сведения о размерах страниц

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

Открой для себя больше

Сортировка по выделению

Возможности сортировки Word довольно удобны и просты в использовании. Что, если вы хотите отсортировать по чему-то, что Word не сортирует …

Открой для себя больше

Применение настроек ленты ко всем книгам

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

Открой для себя больше

Форматирование абзаца

В Word, термин «абзац» означает любое количество текста, графики, объектов или других элементов, за которыми следует знак абзаца (¶), который вставляется в документ при каждом нажатии клавиши ENTER.Вы можете отобразить или скрыть знаки абзаца, нажав кнопку «Показать / скрыть» на стандартной панели инструментов. При форматировании абзаца вы фактически форматируете блок текста и вставленных объектов, за которым следует знак абзаца. Знак абзаца сохраняет всю информацию о форматировании абзаца. Форматы абзаца влияют на внешний вид всего выбранного абзаца, а не только определенных слов или строк текста в абзаце. Внешний вид документа во многом зависит от форматирования, которое вы применяете к различным абзацам.

Примеры форматов, которые можно применить к абзацам:

Выравнивание
Вкладки
Межстрочный интервал
Расстояние между абзацами
Углубление
Прописная заглавная буква
Границы и штриховка
Пули и нумерация
и т. Д.

На заметку о форматировании абзацев

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

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

Объяснение выравнивания текста

Термин «выравнивание» в Word означает, как текст или объекты в документе выравниваются по полям. Это один из различных способов размещения текста по горизонтали на одной линии с левым полем, правым полем, обоими или внутри них.

По умолчанию Word выравнивает текст по левому краю по левому краю.Выбранный тип выравнивания влияет на весь выбранный абзац.

Как правило, текст можно выровнять по левому краю, по центру, по правому краю или по ширине в Word.

Чтобы выровнять текст, вы просто выбираете абзац (или просто помещаете в нем точку вставки), а затем выбираете команду или кнопку, соответствующую типу выравнивания. Вы можете быстро выровнять текст, выбрав команду с клавиатуры или на панели инструментов. В таблице ниже показан список кнопок на панели инструментов Форматирование и соответствующие сочетания клавиш , которые используются для выполнения различных операций выравнивания в Word.

ДЛЯ ВЫРАВНИВАНИЯ	НАЖМИТЕ ЭТУ КНОПКУ	ИЛИ НАЖМИТЕ ЭТИ КЛЮЧИ
Влево		9013	9013	9013
Справа		Ctrl + R
По ширине		Ctrl + J

Выровнять текст слева направо левое поле.Таким образом, текст выравнивается по левому отступу, оставляя неровный или неровный правый край. Это называется с выравниванием по левому краю . Пример СОВЕТ: Поскольку текст выравнивается по левому полю по левому отступу, убедитесь, что не сделали отступ в абзаце перед выравниванием текста по левому краю.

Выравнивание по центру

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

СОВЕТ: Как отмечалось ранее, перед центрированием абзаца убедитесь, что абзац не имеет отступа.

Выровнять текст по правому краю

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

Выравнивание текста по ширине

Выравнивает абзац (текст) как по левому, так и по правому отступам, оставляя левый и правый края ровными. Однако обратите внимание, что Word не выравнивает последнюю строку абзаца или короткий однострочный абзац. Когда абзац выровнен по ширине, Word выравнивает линии по левому и правому краям, заставляя строки начинаться с левого края и заканчиваться у правого края, при необходимости расставляя переносы и регулируя интервалы между символами.

Этапы выравнивания текста с помощью диалогового окна «Абзац»

Выберите абзацы или поместите точку вставки в абзаце , который необходимо выровнять.
В меню Формат щелкните Абзац. Откроется диалоговое окно «Абзац».
Щелкните вкладку Отступы и интервалы .
В поле Выравнивание выберите нужный тип выравнивания.
Щелкните ОК.

Диалоговое окно абзаца

Отступ

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

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

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

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

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

Обычно абзац может иметь отступ с помощью:

Горячие клавиши.
Кнопки панели инструментов форматирования.
Линейка.
Диалоговое окно «Абзац».

Отступ абзацев с помощью горячих клавиш

Вы в основном перемещаете маркеры отступа, чтобы создать отступ. Это можно сделать с помощью клавиатуры.

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

PRESS	TO INDENT	AND TO
Ctrl + M	Весь абзац со следующим отступом табуляции весь абзац
Ctrl + Shift + M	Весь абзац с предыдущей табуляцией	Уменьшить левый отступ всего абзаца
Ctrl + T	Второй строка и вперед абзаца (ов) со следующей табуляцией	Создать отступ
Ctrl + Shift + T	Вторая строка и вперед абзаца (ов) с предыдущей табуляцией	Уменьшить выступ

Отступ абзацев с помощью панели инструментов форматирования

Fo Панель инструментов rmatting предлагает две кнопки, которые можно использовать для увеличения или уменьшения отступов для всего выделенного абзаца.Эти кнопки перемещают маркер отступа на одну позицию табуляции.
Шаги

Выберите абзацы или поместите курсор в абзаце, который нужно сделать с отступом.
Нажмите кнопки панели инструментов Форматирование , показанные в следующей таблице, чтобы задать отступ абзацев, как показано:

Отступ Отступ стоп

НАЖМИТЕ		ДО
Кнопка	Вкладка	ДО	Имя
	Уменьшить отступ	Отступ абзаца до предыдущей позиции табуляции

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

Отступ абзацев с помощью линейки

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

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

ИМЯ	МАРКЕР	НАЗНАЧЕНИЕ
Отступ первой строки		Перетащите, чтобы установить отступ первой строки влево, измеренный относительно отступа влево.
Висячий отступ ( верхняя половина конуса )		Перетаскивание для создания «висячего» отступа, при котором первая строка висит над последующими строками выбранного абзаца.Последующие строки под первой строкой называются строками оборота и имеют отступ от левого поля .
Отступ слева ( — нижняя половина в рамке )		Перетащите, чтобы установить отступ первой и левой строки, при этом как первая строка, так и последующие строки абзаца имеют отступ от левого поля.
Отступ справа		Перетащите, чтобы установить отступ справа.

Отступ абзацев с помощью t Диалоговое окно «Абзац»

Диалоговое окно «Абзац», которое вы вызываете, выбирая команду «Абзац» в меню «Формат», позволяет вам определять точные значения измерений для отступа абзацев. Здесь вы можете ввести значения измерения, а затем указать, какой тип отступа вы хотите создать, без необходимости нащупывать полосу линейки в поисках соответствующего маркера или выполнять проб и ошибок с помощью сочетаний клавиш.Диалоговое окно «Абзац» предлагает типы отступов, которые можно создать, задав точные значения. Это:

Отступ слева
Отступ справа
Отступ первой строки
Вешалка
(отрицательный отступ)

Диалоговое окно «Абзац»

Левый отступ

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

Для установки отступа слева для абзацев

Выберите абзацы или поместите точку вставки в абзаце, в котором нужно сделать отступ.
В меню Формат щелкните Абзац. Появится диалоговое окно «Абзац».
Щелкните вкладку Отступы и интервалы , чтобы отобразить параметры страницы вкладки Отступы и интервалы.
Введите конкретное значение (например, 0,65 «) для левого отступа в поле Слева внутри раздела Отступ .
Нажмите кнопку ОК .

Пример: До и после форматирования абзацев с помощью команды «Отступ слева».


Выделите абзацы и выберите команду	Отступ слева: (Обратите внимание на новое положение слева Маркер отступа s по отношению к абзацам с отступом.)

Отступ справа

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

Для создания отступа справа для абзацев

Выберите абзацы для отступа от правого поля.
На панели инструментов Форматирование выберите команду Абзац . Откроется диалоговое окно «Абзац».
Щелкните вкладку Отступы и интервалы , чтобы отобразить параметры страницы вкладки Отступы и интервалы.
Введите значение для правого отступа справа в поле Справа .
Щелкните ОК.

Пример: До и после форматирования абзацев с помощью команды «Правый отступ».


Выберите нужные абзацы	Отступ справа. (Обратите внимание на новое положение маркера правого отступа на линейке по отношению к расстоянию правого края выделенных абзацев от правого поля.)

Отступ первой строки

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

Для создания отступа первой строки для абзацев

Выберите нужные абзацы.
На панели инструментов Форматирование выберите команду Абзац . Откроется диалоговое окно «Абзац».
Щелкните вкладку Отступы и интервалы , чтобы отобразить параметры страницы вкладки Отступы и интервалы.
В поле Special щелкните First Line , чтобы сделать отступ только для первой строки выбранного абзаца.
В поле « на » введите значение отступа для первой строки.
Щелкните ОК.

Пример: До и после форматирования абзацев с помощью команды «Отступ первой строки».


Абзацы без отступа	Первая строка Абзацы с отступом. (Обратите внимание на новое положение маркера отступа первой строки на линейке по отношению к первым строкам затронутых абзацев.)

Висячий отступ

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

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

Для создания выступа для абзацев

Выберите нужные абзацы.
На панели инструментов Форматирование выберите команду Абзац . Откроется диалоговое окно «Абзац».
Щелкните вкладку Отступы и интервалы , чтобы отобразить параметры страницы вкладки Отступы и интервалы.
В поле Special щелкните Hanging , чтобы сделать отступ для всех строк выбранного абзаца, кроме первой.
В поле На введите значение величины отступа для выступа.
Щелкните ОК.

Пример: До и после форматирования абзацев с помощью команды «Висячий отступ».


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

Как создать выступающий отступ с помощью линейки

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

Выберите нужные абзацы или поместите точку вставки в нужный абзац.
Перетащите маркер Left Indent вправо, в желаемое положение на горизонтальной линейке.
Перетащите маркер Отступ первой строки влево, желательно в предыдущую позицию на горизонтальной линейке.
Отпустите кнопку мыши.

Ура! Вы только что создали выступ на линейке. Как творчески!

Создание отрицательного отступа

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

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

Выберите абзац, который нужно расширить до поля, предпочтительно однострочный абзац.
На панели инструментов Форматирование выберите команду Абзац . Откроется диалоговое окно «Абзац».
Введите отрицательное число в поле «Слева», чтобы создать отрицательный отступ слева.
Выберите вариант Нет из списка Special .
Щелкните ОК.

Пример: До и после форматирования абзацев с отрицательным отступом.


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

СОВЕТ: Чтобы установить отрицательный отступ слева с помощью горизонтальной линейки, перетащите маркер Left Indent в позицию, с которой должен начинаться абзац.
Удалить отступ абзаца ation
Выберите абзацы, в которых нужно удалить отступ.
Выполните одно или несколько из следующих действий:
Чтобы удалить отступ слева от выбранного абзаца, измените число в поле Left на 0 «.
Чтобы удалить отступ справа от выбранного абзаца, измените число в поле Right на 0 «.
Чтобы удалить специальное форматирование отступов (отступ первой строки или выступающий отступ), щелкните Нет в поле Special .
Нажмите кнопку ОК .

СВЯЗАННЫЕ ЗАПИСИ

Отрегулируйте отступы и интервалы в Word
Выберите текст, который нужно изменить.
На вкладке Домашняя страница щелкните Межстрочный интервал , а затем щелкните Параметры межстрочного интервала в нижней части меню.
Откроется диалоговое окно Абзац .
На вкладке Отступы и интервалы выберите нужные параметры и нажмите ОК .
Параметры диалогового окна Paragraph описаны в следующем разделе.
Параметры диалогового окна Абзац
Выберите один из этих параметров в диалоговом окне Абзац .В нижней части диалогового окна в поле «Предварительно» показано, как выглядят параметры перед их применением.
Общие
Выравнивание
Выберите Влево , чтобы выровнять текст по левому краю с неровным правым краем (или используйте сочетание клавиш + L).
Выберите По центру , чтобы центрировать текст с неровным левым и правым краем (+ E).
Выберите Справа , чтобы выровнять текст по правому краю с неровным левым краем (+ R).
Выберите По ширине , чтобы выровнять текст слева и справа, добавив пробел между словами (+ J).
Уровень структуры
Выберите уровень, на котором абзац отображается в режиме структуры.
Отступ
Левый
Перемещает левую часть абзаца на выбранную вами величину.
Справа
Перемещение в правую часть абзаца на выбранную вами величину.
Special
Выберите Первая строка , чтобы сделать отступ в первой строке абзаца, а затем укажите размер отступа в на .
Выберите Hanging , чтобы создать выступ, а затем укажите размер отступа в By .
Автоматически настраивать
При выборе Автоматически настраивать отступ справа, если задана сетка документа , отступ справа автоматически корректируется для абзаца при определении сетки документа.
Интервал
До
Регулирует расстояние перед абзацем.
После
Регулирует расстояние после абзаца.
Межстрочный интервал
Выберите Одинарный для одинарного пробела текста.
Выберите 1,5 строки , чтобы интервал текста в полтора раза превышал одинарный.
Выберите Двойной , чтобы текст был разделен двойным интервалом.
Выберите Не менее > На , чтобы установить минимальный интервал, необходимый для размещения самого большого шрифта или изображения в строке.
Выберите Ровно > На , чтобы установить фиксированный межстрочный интервал, выраженный в точках.Например, если текст набран шрифтом размером 10 пунктов, вы можете указать 12 пунктов в качестве межстрочного интервала.
Выберите Несколько > В , чтобы установить межстрочный интервал как кратное, выраженное числами больше 1. Например, установка межстрочного интервала на 1,15 увеличит интервал на 15 процентов, а установка межстрочного интервала на 3 увеличивает пространство на 300 процентов (тройной интервал).
Не добавлять
Выберите Не добавляйте пробелы между абзацами одного стиля , если вы хотите исключить некоторые абзацы, например абзацы в маркированном списке, из интервала, установленного До и После .
Привязка к
Выберите Привязать к сетке, если сетка документа определена , чтобы упростить выравнивание текста по сетке документа.
Примечание: Нажмите кнопку Tabs , чтобы точно установить вкладки.
Выберите абзацы, для которых нужно сделать отступ.
В меню Формат щелкните Абзац , а затем щелкните вкладку Отступы и интервалы .
Менее Отступ , выполните одно из следующих действий:
Чтобы вставить
Пример
640
9001 9014
Отступ первой строки
Во всплывающем меню Special щелкните First line .
Висячий отступ
Во всплывающем меню Special щелкните Hanging .
Отрицательный отступ
В поле слева или справа введите отрицательное число, а затем во всплывающем меню Special щелкните Hanging .
Совет: Чтобы быстро сделать отступ для всего абзаца, щелкните абзац, а затем на вкладке Home в разделе Paragraph щелкните Увеличить отступ .
Выравнивание текста CSS и отступ текста CSS
Выравнивание текста, отступ
Текст по-прежнему играет важную роль на веб-странице, потому что большая часть HTML-документа содержит текст.Вы можете управлять текстом в HTML-документе различными способами. В следующих примерах будут представлены различные стили текста и их использование при проектировании CSS.
Выравнивание текста
Вы можете выровнять текст в документе по горизонтали и вертикали.
Выравнивание текста по горизонтали
При горизонтальном выравнивании вы можете выровнять текст по правому краю, левому краю, по центру и по ширине.

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

Вертикальное выравнивание текста
В Vertical Text Alignment вы можете управлять вертикальным расположением внутри содержащего элемента.
При вертикальном выравнивании базовая линия — это значение по умолчанию, которое выравнивает текст по базовой линии родительского элемента.
пример
img { вертикальное выравнивание: нижний текст; }
Отступ текста
Text Indenting позволяет нам вставлять заданную длину перед начальной строкой текста.
п{ текстовый отступ: 20 пикселей; }
В следующих примерах показано, как установить стиль отступа текста в html-документе.
Эта строка вставляет 60 пикселей перед началом только первой строки, следующие строки начинаются с левого поля
Эта строка вставляет 120 пикселей пространства перед началом только первой строки, следующие строки начинаются с левого поля
вывод

Высота линии
Высота строки регулирует интервал между строками в документе, то есть работает как межстрочный интервал.
п{ высота строки: 2; }
высота строки 2em эквивалентна высоте строки 2
В следующем примере показаны два абзаца, один с нормальной высотой строки, а другой с высотой строки: 2
Эта строка устанавливает нормальную высоту строки, поэтому она должна принимать значение высоты строки по умолчанию normal.
Эта строка устанавливает высоту строки равной 2, что означает, что расстояние между строками равно 2em.
No related posts.

Общие
Выравнивание	Выберите Влево , чтобы выровнять текст по левому краю с неровным правым краем (или используйте сочетание клавиш + L).
	Выберите По центру , чтобы центрировать текст с неровным левым и правым краем (+ E).
	Выберите Справа , чтобы выровнять текст по правому краю с неровным левым краем (+ R).
	Выберите По ширине , чтобы выровнять текст слева и справа, добавив пробел между словами (+ J).
Уровень структуры	Выберите уровень, на котором абзац отображается в режиме структуры.

Отступ
Левый	Перемещает левую часть абзаца на выбранную вами величину.
Справа	Перемещение в правую часть абзаца на выбранную вами величину.
Special	Выберите Первая строка , чтобы сделать отступ в первой строке абзаца, а затем укажите размер отступа в на .
	Выберите Hanging , чтобы создать выступ, а затем укажите размер отступа в By .
Автоматически настраивать	При выборе Автоматически настраивать отступ справа, если задана сетка документа , отступ справа автоматически корректируется для абзаца при определении сетки документа.

Интервал
До	Регулирует расстояние перед абзацем.
После	Регулирует расстояние после абзаца.
Межстрочный интервал	Выберите Одинарный для одинарного пробела текста.
	Выберите 1,5 строки , чтобы интервал текста в полтора раза превышал одинарный.
	Выберите Двойной , чтобы текст был разделен двойным интервалом.
	Выберите Не менее > На , чтобы установить минимальный интервал, необходимый для размещения самого большого шрифта или изображения в строке.
	Выберите Ровно > На , чтобы установить фиксированный межстрочный интервал, выраженный в точках.Например, если текст набран шрифтом размером 10 пунктов, вы можете указать 12 пунктов в качестве межстрочного интервала.
	Выберите Несколько > В , чтобы установить межстрочный интервал как кратное, выраженное числами больше 1. Например, установка межстрочного интервала на 1,15 увеличит интервал на 15 процентов, а установка межстрочного интервала на 3 увеличивает пространство на 300 процентов (тройной интервал).
Не добавлять	Выберите Не добавляйте пробелы между абзацами одного стиля , если вы хотите исключить некоторые абзацы, например абзацы в маркированном списке, из интервала, установленного До и После .
Привязка к	Выберите Привязать к сетке, если сетка документа определена , чтобы упростить выравнивание текста по сетке документа.

Чтобы вставить	Пример	640	9001 9014 Отступ первой строки	Во всплывающем меню Special щелкните First line .
Висячий отступ		Во всплывающем меню Special щелкните Hanging .
Отрицательный отступ		В поле слева или справа введите отрицательное число, а затем во всплывающем меню Special щелкните Hanging .