Html отступ снизу: Свойство margin | Справочник HTML CSS

Содержание

Горизонтальные внутренние отступы css. Изучаем отступы текста в html

Верстка 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 не всегда решает тривиальным образом.

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

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

padding-top | padding-right | padding-bottom | padding-left: значение | проценты | inherit

Величину отступа можно указывать в пикселах (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 позволяют задать величины внешних отступов, соответственно, слева, сверху, справа и снизу:

margin-top | margin-right | margin-bottom | margin-left: |auto|inherit

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

Величину отступа можно указывать в пикселах (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-left-style|border-top-style|border-right-style|border-bottom-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|inherit

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

border: | inherit

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

td {border: 1px solid yellow}

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

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

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

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

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

Поля и отступы являются очень важными стилями при построении 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 > Отступы в html документе

«Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.» Абзац 1.10.32 «de Finibus Bonorum et Malorum», написанный Цицероном в 45 году н.э. «Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?» Английский перевод 1914 года, H. Rackham «But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?» Абзац 1.10.33 «de Finibus Bonorum et Malorum», написанный Цицероном в 45 году н.э. «At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.» Английский перевод 1914 года, H. Rackham «On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains.»

Все, что вам нужно знать о свойстве margin в CSS

Хочешь знать больше про веб?

Подпишись на наш телеграм-канал TechRocks WEB-разработка?

Подписаться ×

Перевод статьи «Everything You Need To Know About CSS Margins».

Когда мы начинаем изучать CSS, одной из первых мы осваиваем тему блочной модели. Свойство margin — часть этой модели. Это свойство определяет прозрачное пространство вокруг блока, отодвигающее от этого блока другие элементы. Свойства margin-top, margin-right, margin-bottom и margin-left были описаны еще в CSS1, наряду со свойством margin, позволяющим задать все отступы одновременно.

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

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

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

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

В CSS1 блочная модель была изображена в виде ASCII-диаграммы, как показано на иллюстрации:

Все четыре свойства margin (по одному для каждой стороны) и сокращенный вариант написания (просто margin) были определены еще в CSS1.

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

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

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

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

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

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

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

Смежные блоки-сиблинги

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

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

В примере, приведенном ниже, у нас есть три элемента div. У первого есть верхний и нижний margin в 50 px. У второго тоже есть такие отступы, но по 20 px. У третьего есть верхний и нижний margin по 3 em.

See the Pen Smashing: margins, adjacent siblings by rachelandrew (@rachelandrew) on CodePen.

В итоге расстояние между первым и вторым элементом — 50 px, потому что меньший margin в 20 px поглотился большим. А отступ между вторым и третьим элементами — 3 em, потому что 3 em больше, чем 20 px (нижний margin второго элемента).

Полностью пустые блоки

Если блок пустой, его внешние отступы (верхний и нижний) могут схлопнуться друг с другом. В следующем примере элемент с классом empty имеет верхний и нижний margin (по 50 px каждый). Но в итоге расстояние между первым и третьим элементами не 100 px, а 50 px. Так получилось, потому что верхний и нижний отступы схлопнулись. Если в этот пустой блок добавить что-нибудь (хотя бы даже внутренний отступ — padding), схлопывание внешних отступов не произойдет.

See the Pen Smashing: margin collapsing on an empty element by rachelandrew (@rachelandrew) on CodePen.

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

Этот сценарий чаще всего застает людей врасплох, потому что он не то чтобы сильно интуитивен. В следующем примере у нас есть элемент div с классом wrapper. Также ему назначена красная обводка, чтобы его было лучше видно. Все три элемента-потомка имеют margin в 50 px (т. е., внешние отступы со всех сторон). Но в результате мы не получаем отступа от верхней и нижней границы родительского элемента.

See the Pen Smashing Margins: margin on first and last child by rachelandrew (@rachelandrew) on CodePen.

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

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

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

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

Что может предотвратить схлопывание внешних отступов

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

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

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

See the Pen Smashing: empty boxes with padding do not collapse margins by rachelandrew (@rachelandrew) on CodePen.

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

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

See the Pen Smashing Margins: margin on first and last child doesn’t collapse if the parent has a border by rachelandrew (@rachelandrew) on CodePen.

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

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

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

See the Pen Smashing Margins: a new block formatting context contains margins by rachelandrew (@rachelandrew) on CodePen.

Если хотите узнать больше о свойстве display: flow-root, почитайте статью “Understanding CSS Layout And The Block Formatting Context”. Изменение значения свойства overflow на auto даст тот же эффект. Это тоже создаст новый блочный контекст форматирования, хотя может привести к появлению полос прокрутки, а это порой нежелательно.

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

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

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

See the Pen Smashing Margins: margins on flex items do not collapse by rachelandrew (@rachelandrew) on CodePen.

Стратегии использования margin на вашем сайте

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

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

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

Идеальным вариантом было бы при необходимости давать компонентам display: flow-root. В качестве запасного варианта для старых браузеров для создания нового блочного контекста форматирования можно использовать overflow, превращать родительский элемент во flex-контейнер или добавлять какой-нибудь пиксель внутреннего отступа. Не забывайте, что вы можете использовать функционал запросов для определения поддержки для display: flow-root — чтобы только старые браузеры получали менее оптимальное решение.

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

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


И в завершение статьи давайте рассмотрим еще пару интересных вещей об отступах.

Указание значения margin в процентах

При использовании процентов в CSS всегда следует помнить о том, проценты от чего имеются в виду. Если вы задаете размеры margin и padding в процентах, это всегда проценты от inline-размера родителя (ширина в horizontal writing mode). Это означает, что при использовании процентов у вас будет одинаковый внутренний отступ со всех сторон элемента.

Рассмотрим пример. У нас есть обертка (wrapper) шириной в 200 px. Внутри — блок с margin: 10%. То есть, внешний отступ будет по 20 px со всех сторон, потому что 20 px это 10% от 200 px.

See the Pen Smashing Margins: percentage margins by rachelandrew (@rachelandrew) on CodePen.

Внешние отступы в «относительнопоточном мире»

В этой статье мы все время говорили о вертикальных отступах. Но в современном CSS появилась тенденция говорить о направлении в относительном ключе, а не в физическом смысле. Говоря о вертикальных отступах, мы на самом деле говорим об отступах в блочном измерении. Они могут быть верхними и нижними — если мы в horizontal writing mode (когда чтение идет слева направо и сверху вниз), но в vertical writing mode отступы становятся левыми и правыми.

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

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

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

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

  • margin-block
  • margin-inline

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

See the Pen Smashing margins: flow relative margins by rachelandrew (@rachelandrew) on CodePen.

Дополнительно по теме логических свойств и значений можно почитать вот эту статью или MDN.

Итоги

Теперь вы знаете большую часть того, что вообще стоит знать о внешних отступах! Кратко повторим:

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

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

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

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

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

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

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

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

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

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

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

.margin-block{

margin-top:50px;

}

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

margin: 20px 50px 30px 50px;

margin: 20px 50px 30px 50px;

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

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

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

Пример:

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

.padding-block{

padding-top: 50px;

}

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

padding: 20px 50px 30px 50px;

padding: 20px 50px 30px 50px;

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


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

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

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

Убрать отступ снизу для height:auto



Я столкнулся с проблемой, возникшей с кодированием css. Мне очень нужна помощь в этом вопросе. Короче говоря, у меня есть div для изображения, и это тот div , который я хотел для скользящих баннеров. Но мне интересно, почему под изображением в div будет заполнение, если я установлю высоту как авто (я установил высоту как авто, потому что хочу сделать отзывчивый макет). Независимо от того, как я установил 0 отступов в div для изображения, это не сработает. Я предоставил ссылку, чтобы увидеть изображение или посмотреть живой сайт. Ссылка на вложение http:/ / www.ncc.my / resources/padding-issue.jpg или ссылка на сайт http://www.ncc.my (этот сайт все еще находится в стадии разработки).

Код css, который у меня есть для div, таков:

#contentContainer .slides {width:1140px; height:auto float:left; background:#666;}
#contentContainer .slides img {width:100%; padding:0; margin:0; border:0;}

@media screen and (max-width: 850px)
{
#contentContainer .slides {width:100%;}
}

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

html css padding
Поделиться Источник Jornes     21 февраля 2015 в 17:50

2 ответа


  • html height:auto не работает

    я хочу сделать высоту страницы aspx автоматической. Поэтому я исправил main div height:auto. Но это не работает. Код: <div style=background-color: #F5F5F4; width: 100%; height:auto; padding: 15px;> только верхняя часть div показывает цвет фона.

  • Как убрать отступ в файле HTML в файле VI?

    Как мне исправить отступ в его огромных файлах html, которые были все испорчены? Я попробовал обычную команду gg=G , которая используется для исправления отступов в файлах кода. Однако он, похоже, не работал правильно на файлах HTML. Он просто удалил все форматирование. Я также попытался…



1

Вам нужно добавить display: block на свое изображение. Так что ваш CSS будет

#contentContainer .slides img {
    width: 100%;
    padding: 0;
    margin: 0;
    display: block; /* Add this */
    border: 0;
}

Поделиться Pattle     21 февраля 2015 в 18:00



0

Может быть, попробуйте установить height:100% вместо auto. Этот ответ-скорее выстрел в темноте, я не уверен, что он сработает.

Поделиться skrhee     21 февраля 2015 в 17:54


Похожие вопросы:


h2 расстояние элемента до границы отличается сверху и снизу

CSS: h2 { width: 25%; margin: 11rem auto; font-family: ‘Baron Neue’; font-size: 4vw; color: white; text-align: center; border-top: solid 2px white; border-bottom: solid 2px white; } HTML:…


Почему отступ исчезает, когда я копирую код VBA?

Windows 7 64 bit Office 2010 Мне нужно скопировать Visual Basic из редактора MS в документ .tex и использовать его с пакетом listings . Вставляю ли я код в TeXStudio или Notepad++, все отступы…


Itextsharp pdf автоматически с норвежского добавляет отступ снизу после текста

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


html height:auto не работает

я хочу сделать высоту страницы aspx автоматической. Поэтому я исправил main div height:auto. Но это не работает. Код: <div style=background-color: #F5F5F4; width: 100%; height:auto;…


Как убрать отступ в файле HTML в файле VI?

Как мне исправить отступ в его огромных файлах html, которые были все испорчены? Я попробовал обычную команду gg=G , которая используется для исправления отступов в файлах кода. Однако он, похоже,…


Python отступ в коде Graphserver

Я читаю код с GraphServer . И есть эта функция, которая имеет странный отступ (5-я строка отсчета снизу и 1-я строка отсчета снизу): Эта пятая нижняя строка имеет символ табуляции, и у меня есть…


Как конвертировать отступ снизу на DIV в отрицательную наценку на ее родительского блока div?

Поэтому я хочу, чтобы заполнение DIV (splashSquareTitle) снизу переводилось в то, что оно содержит отрицательную маржу DIV (splashSquare) сверху, я не уверен, но разве проценты создают проблему?…


php GD добавить отступ к изображению и сохранить прямоугольник

Несколько похожий вопрос на этот: php GD добавить отступ к изображению Однако этот ответ превращает изображение в квадрат. Я хотел бы сохранить высоту и ширину изображения в виде прямоугольника без…


height:auto переопределяет все стили высоты

У меня есть отзывчивая страница с двумя разделами. Все элементы в правом разделе должны быть отзывчивыми, поэтому я использовал : #rightSection * {max-width:100%;height:auto} однако любые другие…


Как убрать отступ со второго уровня нумерации ?

У меня есть проблема удалить отступ на элементах 2.1 , 2.2, 2.3 и т. д…. Вероятно, отступ третьего уровня нумерации будет перемещен влево после решения этой проблемы. Мой код: ol { counter-reset:…

Когда использовать margin а когда padding? — IronSet

Когда использовать margin а когда padding?

В разных CSS-фреймворках, действительно, есть правила. Но эти правила не унифицированные. Так, используйте padding для отступа внутри блока, margin – для отсупа самого блока.

Что такое padding top?

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

Что такое padding HTML?

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

Что делает margin в CSS?

Свойство margin CSS определяет внешний отступ на всех четырёх сторонах элемента. Это сокращение, которое устанавливает все отдельные поля одновременно: margin-top , margin-right , margin-bottom и margin-left .

Как убрать отступы в CSS?

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

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

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

Как увеличить отступ в HTML?

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

Как задать внутренний отступ в CSS?

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

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

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

Как сделать отступ в HTML слева?

Бонусная подсказка как сделать отступ в HTML: Чтобы поменять HTML отступ слева на отступ справа, измените свойство margin-left на margin-right.

Как сделать абзац в html коде?

Синтаксис создания абзацев следующий. Каждый абзац начинается с тега

и заканчивается необязательным закрывающим тегом

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

Как уменьшить отступ в нумерации?

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

  1. Выберите маркеры в списке, щелкнув маркер.
  2. Щелкните правой кнопкой мыши и выберите команду Изменение отступов в списке.
  3. Измените расстояние отступа маркера с поля, щелкнув стрелки в поле Расположение маркера или изменяя расстояние между маркером и текстом, щелкая стрелки в поле отступ текста .

Как сделать отступ в таблице HTML?

Отступы внутри ячеек можно добавлять с помощью атрибута cellpadding тега

. Но лучше его не использовать, а задавать отступы с помощью CSS….Можно задавать отступы для каждой из сторон отдельно, используя свойства:
  1. padding-top ,
  2. padding-right ,
  3. padding-bottom ,
  4. padding-left .

Как добавить ячейку в таблице HTML?

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

и

Как убрать отступы в таблице?

Щелкните правой кнопкой мыши на выбранной ячейке и выберите Свойства таблицы. Поля ячейки — снимите флажок «То же, что и для всей таблицы», а затем уменьшите поле до 0 см для левой и правой сторон. Это должно опустить левое поле до касания линии.

Как изменить абзац в таблице Word?

Изменение междустрочных интервалов для части документа Нажмите CTRL+A, чтобы выбрать все. Выберите «Другие варианты междустрок» и укаймь в поле «Междустроковые интервалы». Настройм параметры»До» и «После», чтобы изменить интервал между абзацами. Нажмите кнопку ОК.

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

Изменение интервала между знаками

  1. Выделите текст, который требуется изменить.
  2. На вкладке Главная нажмите кнопку вызова диалогового окна Шрифт, а затем щелкните вкладку Дополнительно.
  3. В поле Интервал выберите параметр Разреженный или Уплотненный, а затем введите нужное значение в поле на.

Как убрать пробел между таблицей и текстом?

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

Как убрать абзац в ворде?

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

Как сделать новый абзац в Excel?

Иногда при заполнении ячейки текстом, возникает необходимость ввести символы с новой строки. Однако, когда мы нажимаем Enter, то Excel воспринимает это как окончание ввода данных и переводит курсор к следующей ячейке. Для того, чтобы сделать абзац в ячейке Excel, нужно нажать ALT+Enter.

Как отступить строку в Excel?

Новую строку текста можно начать в любом месте ячейки.

  1. Дважды щелкните ячейку, в которую требуется ввести разрыв строки. Совет: Можно также выбрать ячейку и нажать F2.
  2. В ячейке щелкните место, где нужно ввести разрыв строки, и нажмите ALT+ВВОД.

Как сделать отступ в таблице Excel?

1 способ:

  1. В окне открытого листа выделите нужные ячейки и перейдите к вкладке «Главная».
  2. В группе «Выравнивание» щелкните по кнопке «Увеличить отступ (или сочетание клавиш Ctrl+Alt+ Tab) или «Уменьшить отступ» (рис. 3.18) (или сочетание клавиш Ctrl+Alt+Shift+Tab).
  • ← Почему может быть задержка месячных если не беременность?
  • Можно ли опустить десну? →
Andrew

Андрей — тренер, спортивный писатель и редактор. В основном он занимается тяжелой атлетикой. Также редактирует и пишет статьи для блога IronSet где делится своим опытом. Андрей знает все от разминки до тяжелой тренировки.

Свежие записи

Другие страницы

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

ГЛАВА 11. Отступы, рамки и выделение

ГЛАВА 11. Отступы, рамки и выделение

В предыдущей главе мы занимались контейнерным Web-дизайном: создавали блочные контейнеры, помещали в них содержимое и задавали для них параметры с помощью особых атрибутов стиля CSS. Результат — вполне профессионально созданная Web-страница. Но чего-то в ней не хватает… Какой-то мелочи недостает, чтобы придать Web- странице лоск. Может быть, отступов и рамок? Так давайте же разберемся с атрибутами стиля, с помощью которых задают пара- метры отступов и рамок! И доделаем наконец нашу Web-страницу.

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

Стандарт CSS предлагает средства для создания отступов двух видов.

1. Отступ между воображаемой границей элемента Web-страницы и его содержимым — внутренний отступ. Такой отступ принадлежит данному элементу Web-страницы, находится внутри его.

2. Отступ между воображаемой границей данного элемента Web-страницы и воображаемыми границами соседних элементов Web-страницы — внешний отступ. Такой отступ не принадлежит данному элементу Web-страницы, находится вне его.

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

— Внутренний отступ — это отступ между границей ячейки и содержащимся в ней текстом.

— Внешний отступ — это отступ между границами отдельных ячеек таблицы. Атрибуты стиля padding-left, padding-top, padding-right и padding-bottom позволяют задать величины внутренних отступов, соответственно, слева, сверху, справа и снизу элемента Web-страницы:

padding-left|padding-top|padding-right|padding-bottom:<отступ>|auto|inherit

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

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

Листинг 11.1

TD, TH { padding-left: 2px; padding-top: 2px; padding-right: 2px; padding-bottom: 2px }

А вот стиль, создающий внутренние отступы, равные двум сантиметрам слева и справа:

indented { padding-left: 2cm; padding-right: 2cm }

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

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

padding: <отступ 1> [<отступ 2> [<отступ 3> [<отступ 4>]]]

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

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

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

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

Пример:

TD, TH { padding: 2px }

indented { padding: 0cm 2cm 0cm 2cm }

Здесь мы просто переписали определения приведенных ранее стилей с использованием атрибута стиля padding.

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

margin-left|margin-top|margin-right|margin-bottom: <отступ>|auto|inherit

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

Пример:

h2 { margin-top: 5mm }

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

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

UL { margin-left: -20px }

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

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

margin: <отступ 1> [<отступ 2> [<отступ 3> [<отступ 4>]]]

Этот атрибут стиля ведет себя так же, как его «коллега» padding.

Пример:

h2 { margin: 5mm 0mm }

Однако мы не можем использовать атрибуты стиля margin-left, margin-top, margin- right, margin-bottom и margin для задания внешних отступов у ячеек таблиц (т. е. расстояния между ячейками) — они просто не будут действовать. Вместо этого следует применить атрибут стиля border-spacing:

border-spacing: <отступ 1> [<отступ 2>]

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

— Если указано одно значение, оно задаст величину отступа со всех сторон ячейки таблицы.

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

Атрибут стиля применяется только к таблицам (тегу <TABLE>):

TABLE { border-spacing: 1px }

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

ВНИМАНИЕ!

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

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

Данный текст является ознакомительным фрагментом.

Продолжение на ЛитРес

набивка-дно — Codrops

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

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

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

Общая информация и заметки

Заполнение элемента обычно используется для вычисления ширины и высоты элемента. Ширина обычно равна ширине области содержимого (устанавливается с помощью свойства ширина ) плюс ширина области заполнения.Например, если для элемента ширина установлена ​​на «300 пикселей», а ширина его отступов (слева и справа) в сумме составляет «60 пикселей», тогда общая вычисленная ширина элемента равна «360 пикселей», а не «300 пикселей». ‘. То же самое относится и к вычисляемой высоте элемента.

Этот расчет высоты и ширины элемента может измениться, если свойство box-sizing используется со значением border-box . В этом случае ширина отступа будет включена в ширину элемента, поэтому ширина отступа будет вычтена из заданного значения ширины элемента.Например, если для ширины элемента задано значение «300 пикселей» с использованием свойства width , а ширина отступов установлена ​​равной «60 пикселей», то общая ширина останется равной «300 пикселей», а ширина области содержимого элемента элемент уменьшится с «300px» до «240px».

Используя box-sizing: border-box; и теперь является рекомендуемой практикой в ​​CSS.

Подробнее об этом можно прочитать в записи свойства box-sizing .Кроме того, см. демонстрационный раздел ниже для живого примера.

Значения

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

Примечания

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

.элемент {
    padding-bottom: наследовать;
}
                 

Примеры

Следующее устанавливает нижний отступ элемента:

.контейнер {
    нижний отступ: 30px;
}

.контейнер-2 {
    обивка-дно: 15%;
}

.подконтейнер {
    padding-bottom: наследовать;
}
                 

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

Свойство padding-bottom работает во всех основных браузерах: Chrome, Firefox, Safari, Opera, Internet Explorer, а также на Android и iOS.

Решено: Верхнее и нижнее заполнение секций

@daizyandco @whitemonkey Для этого потребуется изменить класс css «content».На странице «Типы заголовков» html в редакторе кода («Тема» > «Редактировать HTML/CSS» — щелкните нужный тип заголовка) вы увидите элементы контейнера содержимого в разделах Weebly (включая зоны баннера и нижнего колонтитула), и они имеют класс контейнера (

Содержимое здесь
).

 

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

 .container {
  отступ: 50px 20px;
} 

добавит 50 пикселей отступа выше и ниже содержимого раздела и 20 пикселей отступа слева и справа.Если вы хотите, чтобы верхний и нижний отступы были нулевыми (и это повлияет на каждый раздел вашего сайта), вы должны изменить «50px» на «0». Сложная часть пытается повлиять на один раздел. Поскольку разделы Weebly не имеют определяемых пользователем классов или идентификаторов, вы не можете настроить таргетинг на определенный раздел. В этом случае необходимо залезть в html Header Type и начать вручную возиться с разделами страницы и добавлять свои собственные элементы контента Mustache. Если вы не поняли последнее предложение, вероятно, вы не собираетесь этого делать.

 

Менее элегантным подходом будет обнуление верхнего и нижнего отступов в css для класса контейнера (Тема > Редактировать HTML/CSS — код css является кодом по умолчанию в правой панели кода; найдите » .container» на этой панели) и вручную добавить отступы в Редакторе сайта (лучший подход — НЕ использовать элемент разделителя, а вместо этого использовать разделитель строк, где вы можете специально установить величину интервала в пикселях над и под линией, а затем отключить линия — это лучше, чем элемент разделителя, потому что вы будете точно знать, сколько пикселей пространства у вас есть с разделителем строк, чего вы не будете знать с элементом разделителя).

CSS обивка снизу

Пример <стиль> Таблица { ширина: 70vw; высота: 70вх; } тд { ширина: 50%; фон: золото; вертикальное выравнивание: снизу; } .дополненный { обивка-дно: 10вх; } <таблица> Мягкий. Не дополнен.

Свойство CSS padding-bottom используется для применения отступов к нижней стороне элемента.

См. также свойства padding , padding-right , padding-top и padding-left .

Синтаксис

padding-bottom: [ <длина> | <процент> ]

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

длина
Позволяет указать неотрицательное значение длины в качестве толщины заполнения.Отрицательные значения недействительны.
процент
Позволяет указать неотрицательное значение в процентах в качестве толщины заполнения. Отрицательные значения недействительны.

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

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

начальный
Представляет значение, указанное как начальное значение свойства.
унаследовать
Представляет вычисленное значение свойства родительского элемента.
снято с охраны
Это значение действует как inherit или initial , в зависимости от того, унаследовано свойство или нет. Другими словами, он устанавливает для всех свойств их родительские значения, если они наследуемые, или их начальные значения, если они не наследуемые.

Общая информация

Исходное значение
0
Применимо к

В CSS3 указано, что это свойство применяется ко всем элементам.Однако CSS2 указывает все элементы, кроме table-row-group, table-header-group, table-footer-group, table-row, table-column-group и table-column .

Унаследовано?
Медиа
Визуальный
Анимируемый
Да (см. пример)

Пример кода

тд { нижний отступ: 20px; }

Официальные спецификации

Как изменить нижний отступ в CSS? — Пегасвич.ком

Как изменить нижний отступ в CSS?

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

Значение по умолчанию: 0
Синтаксис JavaScript: object.style.paddingBottom=»50px» Попробуйте

Что делает padding-bottom в CSS?

Свойство CSS padding-bottom задает высоту области заполнения внизу элемента.

Как работает обивка?

Сокращенное свойство CSS padding задает область заполнения сразу со всех четырех сторон элемента… Отрицательные значения недопустимы.

  • Если указано одно значение, оно применяет одинаковые отступы ко всем четырем сторонам.
  • Если указаны два значения, первое заполнение применяется к верхнему и нижнему краю, второе — к левому и правому.

Как добавить отступы в HTML?

Использование HTML для добавления заполнения

  1. Щелкните Изменить.
  2. Переключиться на редактор HTML.
  3. Найдите HTML-код изображений, которые вы хотите изменить.
  4. Найдите атрибут стиля изображения; если у изображения его нет, вы можете добавить его, набрав style=»» после img.
  5. В кавычках добавьте padding: 10px; .

Как уменьшить нижний отступ в CSS?

Чтобы сократить код, можно указать все свойства заполнения в одном свойстве. Свойство заполнения является сокращенным свойством для следующих отдельных свойств заполнения: padding-top….отступ: 25px 50px 75px 100px;

  1. верхний отступ 25px.
  2. отступ справа составляет 50 пикселей.
  3. Нижний отступ
  4. составляет 75 пикселей.
  5. левый отступ составляет 100 пикселей.

Что такое отступы в CSS с примером?

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

Недвижимость Описание
прокладка Используется для установки всех свойств заполнения в одном объявлении.

Почему у меня не работает обивка?

3 ответа. вы установили фиксированную высоту для #main-content, из-за которой padding-bottom не работает. Удалить высоту: 300 пикселей; или просто замените 300px на auto. Теперь свойство padding-bottom должно работать.

Почему мое дно не работает?

Что делает свойство CSS padding bottom?

Свойство CSS padding-bottom задает высоту области заполнения внизу элемента.Область заполнения элемента — это пространство между его содержимым и его границей.

Сколько отступов нужно для w3.css?

Классы w3-padding-size добавляют верхний, нижний, правый и левый отступы к любому HTML-элементу: у меня есть отступы по 4 пикселя сверху и снизу и по 8 пикселей слева и справа. У меня есть верхнее и нижнее заполнение 8px и левое и правое заполнение 16px. У меня есть 12 пикселей сверху и снизу и 24 пикселя слева и справа.

Как добавить верхний и нижний отступы в HTML?

Классы w3-padding-number добавляют верхний и нижний отступы к любому элементу HTML: классы w3-padding-size добавляют верхний, нижний, правый и левый отступ к любому элементу HTML: у меня есть отступы сверху и снизу по 4 пикселя и слева 8 пикселей и правильная прокладка.У меня есть верхнее и нижнее заполнение 8px и левое и правое заполнение 16px.

В чем разница между padding и margin в CSS?

Отступ элемента — это пространство между его содержимым и его границей. Свойство padding является сокращенным свойством для: Примечание: Padding создает дополнительное пространство внутри элемента, а margin создает дополнительное пространство вокруг элемента.

нижний отступ или поле в ul?

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

Кажется, ничего не работает.

Кто-нибудь может сказать мне, что я должен сделать, чтобы получить желаемый эффект?

Буду очень благодарен.

Гроэт, Адриана.
[выбросьте мусор, если хотите связаться со мной по электронной почте]

19 14089 Чт, 29 Янв 2004 17:26:36 +0100, А.Переводчик
написал:
У меня есть ненумерованный список в качестве меню, и мне нужно немного места внизу,
под последним
  • .
    Я пробовал:
    установить нижнее поле на ul
    установить нижнее поле на содержащее

    установить заполнение на ul и

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

    Кажется, ничего не работает.

    Кто-нибудь может сказать мне, что я должен сделать, чтобы получить желаемый эффект?

    Буду очень благодарен.

  • Опубликовать ссылку на проблему?

    В четверг, 29 января 2004 г. 11:31:34 -0500, Нил написал:
    Прислать ссылку на проблему?

    http://www.xs4all.nl/~hogen/TaalVlinder/ :
    второе меню слева ‘vaktaal’ иллюстрирует проблему: я хочу белый
    пробел внизу, чтобы текст меню не становился трудным для чтения
    из-за смешивания с текст содержания.

    Спасибо за столь оперативный ответ!

    Гроэт, Адриана.
    [выбросьте мусор, если хотите связаться со мной по электронной почте]

    «A.Translator» написал:
    У меня есть неупорядоченный список в качестве меню, и мне нужно немного места внизу,
    под последним
  • .
    Я пробовал:
    установка нижнего поля на ul
  • Нет такого свойства. Вы тоже пробовали margin-bottom?

    Стив


    «Мои теории тебя ужасают, мои ереси возмущают тебя,
    Я никогда не отвечаю на письма и тебе не нравится мой галстук.» — Доктор

    Стив Пью

    В четверг, 29 января 2004 г. 17:02:06 +0000, Стив Пью написал:
    Вы тоже пробовали margin-bottom

    Упс! Да.

    Гроэт, Адриана.
    [выбросьте мусор, если хотите связаться со мной по электронной почте]

    «A.Translator» написал:
    В четверг, 29 января 2004 17:02:06 +0000, Стив Пью написал:
    Вы тоже пробовали margin-bottom

    Упс! Да.

    А?


    «Мои теории тебя ужасают, мои ереси возмущают тебя,
    Я никогда не отвечаю на письма и тебе не нравится мой галстук.» — Доктор

    Стив Пью

    В четверг, 29 января 2004 г. 17:24:09 +0000, Стив Пью написал:
    И?

    Ой, опять не радостно.

    Гроэт, Адриана.
    [выбросьте мусор, если хотите связаться со мной по электронной почте]

    «A.Translator» написал:
    http://www.xs4all.nl/~hogen/TaalVlinder/ :
    второе меню слева ‘vaktaal’ иллюстрирует проблему: я хочу белое
    пространство внизу, чтобы текст меню не становится трудным для чтения
    из-за того, что оно смешивается с текстом содержимого.

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

    В противном случае все пространство, которое вы создаете (с нижним полем на ul или
    padding-bottom на .menu div), прозрачно, а остальная часть страницы
    показывает сквозь.

    Вам нужно будет отрегулировать margin-left и padding-left для ul и
    li, так как в момент
    слева от списка много пробелов. Не забудьте проверить в нескольких браузерах, так как
    значений по умолчанию сильно различаются.

    В качестве альтернативы,
    ..menu ul {border-bottom: 1em сплошной белый;}
    также будет делать то, что вы хотите.

    Стив


    «Мои теории тебя ужасают, мои ереси возмущают тебя,
    Я никогда не отвечаю на письма и тебе не нравится мой галстук.» — Доктор

    Стив Пью

    В четверг, 29 января 2004 г. 17:26:36 +0100, A.Translator написал:
    Я пробовал:
    установка нижнего поля на ul
    установка нижнего поля на содержащее

    установка заполнения на ul и

    Каким-то образом установка белого цвета bg-color содержащего

    имеет эффект
    создания белого отступа внизу — что я хочу — но также
    слева и справа от ul — чего я не делаю хотеть.

    Это происходит, даже если вообще нигде не было отступов.


    Гроэт, Адриана.
    [выбросьте мусор, если хотите связаться со мной по электронной почте]

    A.Translator написал:
    В четверг, 29 января 2004 г. 17:26:36 +0100, A.Translator написал:

    Каким-то образом установка белого цвета bg-color содержащего

    имеет эффект
    создания белого отступа в внизу — что я хочу — но и
    слева и справа от ул — чего я не хочу.

    Это происходит, даже если вообще нигде не было отступов.

    Попробуйте задать всем задействованным элементам (

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

        BTW: протестируйте его в других браузерах, кроме Internet Explorer, поскольку IE ведет себя с блочной моделью
        совершенно иначе (отступы, поля и границы
        на блочном элементе), чем требуют стандарты (которым, похоже, следуют другие основные графические браузеры
        ). просто хорошо).

        Барбара

        http://home.wanadoo.nl/b.de.zoete/html/weblog.html
        http://home.wanadoo.nl/b.de.zoete/html/webontwerp .html

        В четверг, 29 января 2004 г. 17:47:28 +0000, Стив Пью написал:
        О, я вижу проблему. Вам нужно установить фоновый цвет для класса
        .menu

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

        Я поиграю с различными предложениями.

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

        Всем спасибо!

        Гроэт, Адриана.
        [выбросьте мусор, если хотите связаться со мной по электронной почте]

        В четверг, 29 января 2004 г., 19:01:09 +0100, Барбара де Зоете написала:
        Кстати: протестируйте его в других браузерах, кроме Internet Explorer, поскольку IE ведет себя с блочной моделью
        совершенно иначе (отступы, поля и границы
        на блочном элементе), чем требуют стандарты (которые, похоже, прекрасно соблюдаются другими графическими браузерами
        ).

        Спасибо, что предупредили меня об этом: мой стандартный браузер — Mozilla 1.5, который
        делает то, что я хочу, но, очевидно, я также тестирую, по крайней мере, IE.

        Все еще борюсь.

        [интерлюдия на голландском языке]
        (ивр. op je site gekeken: leuk! en kom zeker terug om van je css tip
        te leren).

        Гроэт, Адриана.
        [выбросьте мусор, если хотите связаться со мной по электронной почте]


        «А.Переводчик» написал в сообщении
        новости:st***************@www.translationia.com…
        В четверг, 29 января 2004 г., 19:01:09 +0100, Барбара де Зоете написала:
        Кстати: протестируйте его в других браузерах, кроме Internet Explorer, поскольку IE ведет себя с блочной моделью совершенно по-другому. (отступы, поля и границы
        в блочном элементе), чем требуют стандарты (которым, похоже, следуют другие основные графические браузеры
        ).
        Спасибо, что предупредили меня об этом: мой стандартный браузер — Mozilla 1.5,

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

        Все еще борюсь.

        [интерлюдия на голландском языке]
        (ивр. op je site gekeken: leuk! en kom zeker terug om van je css tip
        te leren).

        Нидерландцы в зеленых плащах. (Nij, ‘k ben niet een
        ervan.)

        A.Translator написал:
        В четверг, 29 января 2004 г. 19:01:09 +0100, Барбара де Зоете написал:
        Кстати: протестируйте его в других браузерах, кроме Internet Explorer, поскольку IE ведет себя с
        блочной моделью совершенно по-другому. (отступы, поля и границы
        в блочном элементе), чем требуют стандарты (которым, похоже, следуют другие основные графические браузеры
        ).
        Спасибо, что предупредили меня об этом: мой стандартный браузер — Mozilla 1.5, который
        делает то, что я хочу, но, очевидно, я также тестирую, по крайней мере, в IE.

        Извините за это. Я предположил очевидное, но у вас дело обстоит иначе. Хорошо для использования различных браузеров.
        Все еще борюсь.
        Так будет всегда 😀 или так кажется. Каждый раз, когда вы
        думаете о чем-то, вы начинаете все сначала с новыми функциями для новых элементов.
        [интерлюдия на голландском]
        (ивр. op je site gekeken: leuk!
        Данк.
        com zeker terug om van je css советы
        te leren).

        Volgens mij ben je daar al voorbij, maar als er iets van je gading bij
        zit, graag gedaan.

        Барбара

        http://home.wanadoo.nl/b.de.zoete/html/weblog.html
        http://home.wanadoo.nl/b.de.zoete/html/webontwerp .html

        Харлан Мессингер написал:
        «А.Переводчик» написал в сообщении
        новости:st******* ********@www.translationia.com…

        [интерлюдия на голландском языке]
        (ивр. op je site gekeken: leuk! en kom zeker terug om van je css tip
        te leren).

        Жители Нидерландов одеты в длинные платья. (Nij, ‘k ben niet een
        ervan.)

        Хе-хе. Хеле кудде. Хорошо лейк. Nederlanders tegen de Finnen 🙂

        Als jij niet een Nederlander Bent, wat dan wel? En hoe kom je aan je
        Nederlands?

        Барбара

        http://дом.wanadoo.nl/b.de.zoete/html/weblog.html
        http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html

        В четверг, 29 января 2004 г., 23:46:31 +0100, Барбара де Зоете написала:
        Спасибо, что предупредили меня об этом: мой стандартный браузер — Mozilla 1.5, который
        делает то, что я хочу, но, очевидно, я тестирую по крайней мере ИЕ тоже.

        Извините за это. Я предположил очевидное, но у вас дело обстоит иначе. Хорошо для использования различных браузеров.

        Спасибо большое! Вы не должны были знать, что я тестировал в различных браузерах
        . Хотя именно IE вызывает у меня больше всего головной боли…

        Гроет, Адриана.
        [выбросьте мусор, если хотите связаться со мной по электронной почте]

        A.Translator написал:
        Больше всего головной боли у меня вызывает IE…

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

        Но я также хочу, чтобы мой сайт, по крайней мере, работал, желательно с
        красивым представлением (пусть оно отличается от того, что я предпочитаю) в основных
        графических браузерах. И Линкс конечно. Они должны быть идеальными с
        Lynx, потому что для меня это _самый_ тест разметки моего контента.

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

        Барбара

        http://home.wanadoo.nl/b.de.zoete/html/weblog.html
        http://home.wanadoo.nl/b.de.zoete/html/webontwerp .html

        Барбара де Зоете написала:
        Харлан Мессингер написала:
        «А.Переводчик» написала в сообщении
        news:st ***************@www.translatoria.com…

        [интермедия на голландском]
        (ивр. op je site gekeken: leuk! en kom zeker terug om van советы je css
        te leren).

        Жители Нидерландов одеты в длинные платья. (Nij, ‘k ben niet een
        ervan.)

        Хе-хе. Хеле кудде. Хорошо лейк. Nederlanders tegen de Finnen 🙂

        Als jij niet een Nederlander Bent, wat dan wel? En hoe kom je aan je
        Nederlands?

        Американер. Ik woonte drie jaren in Brussel, 30 jaar geleden, en ik
        heb het meestendeels van de ondertitels van de engelstalige
        televisieprogramma’s geleert.. Ik weet niet zo veel woorden—ik moest
        «kudde» in ‘t woordenboek zoeken—maest
        «kudde» in ‘t woordenboek zoeken ик хеб де таал грааг.


        Харлан Мессингер
        Удалите первую точку из моего адреса электронной почты.
        Veuillez ter le premier point de mon adresse de courriel.

        Пятница, 30 января 2004 г., 00:04:05 +0100, Барбара де Зоете написала:
        Итак, я предпочитаю не бороться с IE. На самом деле я не пишу для этого браузера
        , но мои стили ориентированы на посетителей, которые используют IE последних версий
        .

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

        Я некоторое время работал в html, но только недавно начал использовать
        css (правда, уклоняясь от css-P! По крайней мере, пока) и столкнулся с
        проблемами с IE, тогда как раньше было наоборот вокруг: IE, кажется,
        поглощает много шаткого html-кода, но не отображает «правильный» css, а также
        , как, например, Mozilla (заметьте, я еще не пишу правильный css, поэтому часто
        мне нужно только самому обвинять).

        Тем не менее, css для меня как волшебство: немного повозитесь с таблицей стилей и вуаля!

        Гроэт, Адриана.
        [выбросьте мусор, если хотите связаться со мной по электронной почте]

        В четверг, 29 января 2004 г., 23:35:16 -0500, Харлан Мессингер
        написал:
        Барбара де Зоете написал:
        Харлан Мессингер написал:
        » А.Переводчик» написал в сообщении
        новости:st************** *@www.translatoria.com…

        [интерлюдия на голландском]
        (ивр. op je site gekeken: leuk! en kom zeker terug om van je css tip
        te leren).

        Zo veel Nederlanders in een plaats. (Nij, ‘k ben niet een
        ervan.)

        Хе-хе. Хеле кудде. Хорошо лейк. Nederlanders tegen de Finnen 🙂

        Als jij niet een Nederlander Bent, wat dan wel? En hoe kom je aan je
        Nederlands?

        Американер. Ik woonte drie jaren in Brussel, 30 jaar geleden, en ik
        heb het meestendeels van de ondertitels van de engelstalige
        televisieprogramma’s geleert.. Ik weet niet zo veel woorden—ik moest
        «kudde» in ‘t woordenboek zoeken—maest
        «kudde» in ‘t woordenboek zoeken ик хеб де таал грааг.

        En hier heb je er nogen. Ik verhuisde van Engeland naar Nederland 20
        jaar geleden, met het idee dat het leuk zou zijn om een ​​ander land te
        proberen voor een jaar of twee …


        Stephen Poley

        all http://www.xss .nl/~sbpoley/webmatters/

        Эта ветка обсуждения закрыта

        Ответы для этого обсуждения отключены.

    Заполнение CSS — TutorialBrain

    Главная » CSS » CSS Padding

    Здесь значения padding: padding-top:0;padding-right:50px;padding-bottom:0; заполнение слева: 0;

    padding-top:20px;
    padding-right:20px;
    padding-bottom:20px;
    padding-left:20px;

    заполнение сверху: 0; заполнение справа: 0; заполнение снизу: 0;
    padding-left:0;

    Нет обивки со всех сторон.

    С прокладкой и без прокладки

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

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

    Проще говоря, Padding — это пространство вокруг элемента.

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

    Используя свойство CSS padding, вы можете указать отступ сверху, справа, снизу и слева вокруг элемента.

    Padding имеет 4 стороны –
    1. padding-top – Padding-top – это верхний отступ элемента.
    2. padding-right – Padding-right — правый отступ элемента.
    3. padding-bottom — Padding-bottom — нижний отступ элемента.
    4. padding-left — Padding-left — это левый отступ элемента.
    Существует 2 способа установки отступа:
    1. Использование сокращенного свойства padding
    2. Использование отдельных свойств padding-top, padding-right, padding-bottom и padding-left

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

    Сокращенный синтаксис CSS-padding:

    padding: unit|initial|inherit;

    Где единицы измерения могут принимать значения в таких единицах, как px, em, длина, % и т. д.

    Этот синтаксис устанавливает значения padding-top, padding-bottom, padding-right и padding-left одновременно.

    Пример использования сокращенного свойства заполнения

     <стиль>
      .padding_shorthand1 {
         граница: 3px сплошной порошок синего цвета;
         отступ: 5px;
    }
    
      .padding_shorthand2 {
         граница: 3px сплошной оранжевый;
         отступ: 20 пикселей 10 пикселей;
    }
    
      .padding_shorthand3 {
         граница: 3px сплошной розовый;
         отступ: 30px 10px 20px;
    }
    
      .padding_shorthand4 {
         граница: 3px сплошной цвет морской волны;
         отступ: 0 15px 20px 5px;
    }
    
     
      Для  Пример:
    отступ: 10 пикселей;
     

    , то верхний, правый, нижний и левый отступы равны 10px каждый.

      Для  Пример:
    отступы: 0,5 см 1 см;
     

    , то верхний и нижний отступы равны по 0,5em каждый, а правый и левый отступы — по 1em каждый.

      Для  Пример:
    отступ: 5px 3px 8px;
     

    , то верхний отступ равен 5 пикселей, правый и левый отступы — 3 пикселя, а нижний — 8 пикселей.

      Для  Пример:
    отступ: 10px 2em 15px 5px;
     

    , тогда верхний отступ равен 10px, правый отступ — 2em, нижний отступ — 15px и левый отступ — 5px.

    Как получить отступ от родительского элемента

    Ключевое слово «наследовать» получает свойства от своего родителя. Чтобы получить родительские свойства, связанные с дополнением, вы можете использовать: padding:inherit;

    Как автоматически рассчитать заполнение?

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

    Синтаксис:

    padding:auto;

    Синтаксис использования отдельного свойства CSS-padding:
    padding-top : unit|initial|inherit ;
    padding-right : единиц|начальный|наследовать ;
    padding-bottom : единиц|начальный|наследовать ;
    padding-left : единиц|начальный|наследовать ;

    Где единицы измерения могут принимать значения в таких единицах, как px, em, длина, % и т. д.

    Пример использования индивидуального свойства заполнения

     <стиль>
      .padding_individual1 {
         граница: 10px сплошной оранжевый;
         обивка-верх: 1em;
    заполнение снизу: 2em;
    отступ слева: 50px;
    }
    
      .padding_individual2 {
         граница: 5px пунктирный помидор;
    отступ справа: 60px;
    }
    
     

    CSS-интервью Вопросы и ответы

    В CSS свойство Padding используется для выделения пространства вокруг содержимого элемента.
    Синтаксис:

     padding: 5px;
     
    Отступ  Поля
    Отступ – это пространство между внешним краем содержимого и внутренним краем границы. Поле — это пространство между внешним краем границы и внутренним краем самого поля.
    Синтаксис: Синтаксис:
    padding: 5px; Поле: 15 пикселей;
    Внутри элемента. Внешний по отношению к элементу.
    Padding также устанавливает ширину и высоту элемента. Поля не задают никаких размеров элемента.
    Заполнение не может использовать автоматическое значение единицы измерения. Мы можем установить значение автоматической единицы поля.

    Свойства отступов CSS:

    • padding-top
    • padding-right
    • padding-bottom
    • padding-left
    отступы: 50 пикселей; (Значение для всех четырех отступов).
    отступы: 50 пикселей 80 пикселей; (верхний и нижний правый и левый) — если отступ имеет 2 значения.
    отступы: 50 пикселей 80 пикселей 60 пикселей; (вверху справа и слева внизу) — если отступ имеет 3 значения.
    отступы: 50 пикселей 80 пикселей 60 пикселей 45 пикселей; (вверху справа внизу слева) — Если отступ имеет 4 значения.

    колодка | CSS-трюки — CSS-трюки

    padding-block — это логическое сокращенное свойство CSS, которое объединяет свойства padding-block-start и padding-block-end в единое объявление, создавая пространство вокруг содержимого элемента в блоке ( верхнее и нижнее) направление.

      .элемент {
      padding-block: 30px 60px;
      режим письма: вертикальный-rl; /* Определяет направление блока заполнения */
    }  

    Когда мы говорим, что padding-block «создает пространство вокруг содержимого элемента», мы имеем в виду пространство, которое обеспечивает дополнительную передышку между содержимым элемента и краями элемента.

    Направление «блок» — сверху вниз в горизонтальном режиме письма, но поворачивается к «встроенному» направлению справа налево в вертикальном режиме письма.

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

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

    Свойство padding-block может быть указано с одним или двумя значениями. Если задано одно значение, оно используется как значение для обоих padding-block-start и padding-block-end .Если даны два значения, первое используется для padding-block-start , а второе для padding-block-end .

    Направление зависит от режима записи

    padding-block является логическим свойством, что означает, что он адаптирует режим записи страницы. Итак, когда мы находимся в режиме горизонтальной записи сверху вниз по умолчанию (режим записи : horizontal-tb ), направление блока идет сверху вниз. Но когда режим письма меняется на режим вертикального письма (т.грамм. режим записи: вертикальный-rl ), элемент поворачивается, превращая блочное направление в линейное, где отступы идут слева направо (или справа налево, в зависимости от точного режима записи).

    Другой способ представить это: padding-block ведет себя как padding-top и padding-bottom в горизонтальном режиме письма по умолчанию, но ведет себя как padding-left и padding-right в режим вертикального письма.

    Режим записи по умолчанию устанавливается горизонтально сверху вниз, если он не объявлен явно.

    Синтаксис

      padding-block: <'padding-top'>{1,2};  

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

    .
      padding-top: <длина> | <процент> | авто;  
    • Начальное значение: 0
    • Применяется к: Все элементы, за исключением внутренних элементов таблицы, базовых контейнеров и рубиновых Annotation
    • inhered: NO
    • Inhered: NO
    • . свойство
    • Вычисленное значение: аналогично соответствующему padding-* свойства
    • Тип анимации: по типу вычисляемого значения
    Значения

    Если вы знакомы с сокращенным свойством padding , то padding-block покажется вам очень знакомым.Разница лишь в том, что он работает в двух направлениях вместо четырех.

      /* Значения длины */
    padding-block: 20px 40px;
    колодка: 2рем 4рем;
    набивка: 25% 15%;
    padding-block: 20px; /* одно значение устанавливает оба значения */
    
    /* Значения ключевых слов */
    padding-block: авто;
    
    /* Глобальные значения */
    padding-block: наследовать;
    padding-block: начальный;
    padding-block: не установлен;  

    Учредительные свойства

    Ранее мы говорили, что padding-block — это сокращенное свойство.Это означает, что он объединяет несколько свойств в одно объявление, и эти включенные свойства называются составными свойствами .

    Давайте посмотрим конкретно на свойства CSS padding-block-start и padding-block-end , которые составляют сокращение padding-block . Они удобны, поскольку позволяют нам определять отступы в направлении блока, по одной стороне за раз.

    начало блока заполнения

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

      .элемент {
      начало блока заполнения: 30 пикселей;
      режим письма: вертикальный-rl; /* Определяет направление блока заполнения */
    }  

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

    И, если мы переключим все на вертикальное справа налево, вы, наверное, уже догадались: правая сторона становится начальным краем.

    Режим Записи Запуска край +
    горизонтально-TB Лучшей обивка
    вертикально-Л.Р. левой обивка
    вертикальная ге Права набивка
    конец набивки

    padding-block-end — это все, что мы только что рассмотрели с padding-block-start , только в обратном направлении.Таким образом, если «начало» в режиме горизонтального письма сверху вниз — это верхнее заполнение, то «конец» — нижнее заполнение.

      .элемент {
      конец блока заполнения: 30px;
      режим письма: вертикальный-rl; /* Определяет направление блока заполнения */
    }  
    +
    Режим Запись Ending кромку +
    горизонтально-Tb Нижняя обивка
    вертикально-Lr правый обивка
    вертикально-Rl Left padding

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

    Opera
    IE Край Firefox Chrome Safari
    Нет 87+ 66+ 87+ 14. 1 73
    Android Chrome Android Firefox Android Browser IOS Safari Opera Mobile
    Да Да 93+ 14.7+
    Источник: caniuse

    Дополнительная информация

    Связанные

    .

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

    Ваш адрес email не будет опубликован.