Margin-right

Содержание:

CSS Advanced
Значения margin
Свойства margin и padding на примере сайта
CSS Свойства
Special Considerations
Как работать с margin и padding
Схлопывание margin
Вопрос опять! — почему margin-bottom никак не сработал!?
Свойство direction (строчная ось)
Браузерная поддержка
Проблемы с логическими свойствами
Свойство margin = «0»
Margin Property in CSS
Центрирование абсолютно позиционированных элементов
Syntax
Padding в CSS и Margin в CSS
Обнуление margin
Отмена схлопывания margin

CSS Advanced

CSS Rounded CornersCSS Border ImagesCSS BackgroundsCSS ColorsCSS Color KeywordsCSS Gradients
Linear Gradients
Radial Gradients

CSS Shadows
Shadow Effects
Box Shadow

CSS Text EffectsCSS Web FontsCSS 2D TransformsCSS 3D TransformsCSS TransitionsCSS AnimationsCSS TooltipsCSS Style ImagesCSS Image ReflectionCSS object-fitCSS object-positionCSS ButtonsCSS PaginationCSS Multiple ColumnsCSS User InterfaceCSS Variables
The var() Function
Overriding Variables
Variables and JavaScript
Variables in Media Queries

CSS Box SizingCSS Media QueriesCSS MQ ExamplesCSS Flexbox
CSS Flexbox
CSS Flex Container
CSS Flex Items
CSS Flex Responsive

Значения margin

Display в css

В качестве значений margin используются любые допустимые единицы длины, к примеру, пиксели, проценты, em, rem и др. В отличие от padding свойство margin может быть отрицательным (например: -10px), а также принимать значение auto. В остальном margin похоже на padding, у него также может быть от одного до четырёх значений.

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

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

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

Четыре значения — первое определяет отступ сверху, второе справа, третье снизу, четвёртое слева. Для запоминания последовательности можно представить часы — значения идут по часовой стрелке, начиная с 12 часов.

Значение auto

Свойство margin позволяет выравнивать элемент по центру горизонтали, если использовать значение auto и задать ширину элемента через width (пример 1).

Пример 2. Значение auto

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>margin</title>
<style>
.dialog {
width: 80%; /* Ширина блока */
background: #D4E3A5; /* Цвет фона */
border: 2px solid #7D9B3D; /* Параметры рамки */
padding: 1rem; /* Поля */
margin: auto; /* Выравниваем по центру */
}
</style>
</head>
<body>
<div class=»dialog»>
Полинезийцы называют Млечный путь Манго-Роа-И-Ата,
что в переводе с маори означает «Длинная акула на рассвете».
</div>
</body>
</html>

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

Рис. 3. Выравнивание блока по центру

Вместо margin: auto можно использовать комбинацию margin-left: auto и margin-right: auto.

Выравнивание блока по центру через значение auto работает только в сочетании с width.

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

Пример 3. Значение auto

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>margin</title>
<style>
.center {
display: block; /* Блочный элемент */
margin: auto; /* Выравниваем по центру */
}
</style>
</head>
<body>
<img src=»image/html-128.png» alt=»HTML5″ class=»center»>
</body>
</html>

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

Рис. 4. Выравнивание картинки по центру

Проценты

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

По горизонтали проценты считаются от ширины всего блока.
По вертикали проценты считаются от ширины всего блока.

Таким образом, margin в процентах берётся от ширины всего блока, даже для margin-top и margin-botom.

Отрицательный margin

margin может быть задан с отрицательным значением, тем самым элемент сдвигается в противоположном направлении. К примеру, margin-top:-10px поднимает блок вверх на 10 пикселей, а margin-left:-10px сдвигает блок влево.

В примере 4 показан сдвиг блока с классом stat вверх, если он располагается сразу после элемента <p>.

Пример 4. Использование отрицательного значения

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>margin</title>
<style>
p + .stat {
margin-top: -1rem; /* Поднимаем текст вверх */
}
.stat {
font-size: 3rem; /* Размер текста */
}
</style>
</head>
<body>
<p>Продано ёлок</p>
<p class=»stat»>64</p>
</body>
</html>

Результат данного примера показан на рис. 5. Без отрицательного margin строки располагаются далеко друг от друга.

Рис. 5. Поднимаем блок вверх через margin-top

Свойства margin и padding на примере сайта

Css-свойство border

Рассмотрим свойства на примерах с элементами. Мы начнем с абзаца (тега <p>), затем добавим к нему цвет фона и добавим отступ 30px с каждой стороны.

Ниже слева видно, что это абзац с padding 30px вокруг него. На изображении справа я использовал инструменты Google Chrome, чтобы показать, где padding HTML начинается /заканчивается для этого элемента. Зеленый цвет на изображении ниже – это padding, который расположен вокруг контейнера. Темно-синий цвет фона заполняет внутреннюю область:

Теперь добавим margin абзацу. Я добавлю отступ сверху и снизу 30px, а также 20px слева и справа. Ниже на изображении слева показано, как этот абзац изменился с margin. Фактическая ширина изображения стала меньше, потому что margin отталкивает от границ другой HTML элемент. Справа видно, что оранжевый цвет – это margin вокруг элемента. margin всегда находится за пределами padding и темно-синий фон не распространяется на область margin:

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

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

CSS Свойства

Overflow-y

align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingcaption-sidecaret-color@charsetclearclipcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-weightgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphens@importisolationjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-width@mediamin-heightmin-widthmix-blend-modeobject-fitobject-positionopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpointer-eventspositionquotesresizerighttab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiuser-selectvertical-alignvisibilitywhite-spacewidthword-breakword-spacingword-wrapwriting-modez-index

Special Considerations

Because using margin is a form of borrowing money it comes with costs, and marginable securities in the account are collateral. The primary cost is the interest you have to pay on your loan. The interest charges are applied to your account unless you decide to make payments. Over time, your debt level increases as interest charges accrue against you. As debt increases, the interest charges increase, and so on. Therefore, buying on margin is mainly used for short-term investments. The longer you hold an investment, the greater the return that is needed to break even. If you hold an investment on margin for a long period of time, the odds that you will make a profit are stacked against you.

Not all stocks qualify to be bought on margin. The Federal Reserve Board regulates which stocks are marginable. As a rule of thumb, brokers will not allow customers to purchase penny stocks, over-the-counter Bulletin Board (OTCBB) securities, or initial public offerings (IPOs) on margin because of the day-to-day risks involved with these types of stocks. Individual brokerages can also decide not to margin certain stocks, so check with them to see what restrictions exist on your margin account.

Как работать с margin и padding

Между этими двумя свойствами существует ощутимая разница. Padding используется для задания пространства внутри контейнера HTML-элемента. Margin используется для задания пространства вокруг внешней границы элементов.

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

Также можно думать о padding как о наполнителе в картонной коробке. Когда вы наполняете коробку пенопластом, вы удерживайте им содержимое на расстоянии от краев коробки. Padding в CSS делает то же самое.

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

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

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

Для иллюстрации возьмем следующий HTML-код:

И следующий CSS:

В этом примере для элемента задано нижнее поле в 20 пикселей. Элемент абзаца, который следует сразу за ним, имеет верхнее поле, равное 10 пикселям.

Казалось бы, что величина вертикального поля между и абзацем будет в общей сложности 30 пикселей (20 пикселей + 10 пикселей). Но из-за коллапса полей фактически она окажется всего 20 пикселей. Это показано на примере ниже:

See the Pen
схлопывание margin by Андрей (@adlibi)
on CodePen.

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

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

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

See the Pen
схлопывание внутренних margin by Андрей (@adlibi)
on CodePen.

Здесь абзац имеет верхнее поле в 30 пикселей, который вложен в элемент с верхним полем 40 пикселей. Кроме того, у заголовка нижнее поле 20 пикселей.

Опять же, здравый смысл подсказывает, что общее пространство вертикальных полей здесь будет составлять 90 пикселей (20 + 40 + 30), но вместо этого все поля сворачиваются в одно поле в 40 пикселей (самое большое из трех). Это полезно в большинстве случаев, поскольку нет необходимости переопределять какие-либо из верхних полей, чтобы убрать лишнее вертикальное пространство.

Вопрос опять! — почему margin-bottom никак не сработал!?

Ответ точно такой же, что и в пункте 2.

НО!

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

</div>

Получим:
Наш блок.
Наш блок.

Как видим…наши блоки прилепились друг к другу…

И если сейчас мы добавим к первому блоку margin-bottom: 20px;

</div>

То получим:
Наш блок.
Наш блок.

Какой вывод напрашивается!?

Что для того, чтобы margin-bottom и margin-right сработали, нужны определенные условия!

Свойство direction (строчная ось)

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

Пример направления для арабского:

html {    direction: rtl;}

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

Я сделал небольшое демо. Его лучше смотреть в Firefox, в текущий момент именно в нём поддерживается наибольшее количество свойств.

Демо (попробуйте поменять язык):

Браузерная поддержка

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

Проблемы с логическими свойствами

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

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

Этот вопрос всё ещё открыт. Я внёс предложение, которое . Если у вас есть решение получше, то вы можете оставить комментарий в этой ветке!

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

Предложенное мною решение:

html {   flow-mode: physical;    /* или */   flow-mode: logical;}.box {  /* будет интерпретироваться согласно значению flow-mode */   margin: 10px 5px 6px 3px;   padding: 5px 10px 2px 7px;}

Свойство margin = «0»

Начнем изучение margin, когда margin = «0» или вообще отсутствует!

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

width: 100%;

height: 200px;

border: 1px solid black;

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

width: 100px;

height: 20px;

border: 1px solid red;

И получим два блока, один внутри другого:

</div>

Результат:

Наш блок.

Margin Property in CSS

With the help of CSS, it is possible to control the margin of any HTML element. Different properties are available that can be used to set the margins for all sides of any HTML element. The margin value implemented within CSS should have to be either of the following:

An automatic, i.e., auto value where your browser will calculate the margin for you
A percentage value (specify the width of containing element)
A Length (px, pt, cm, etc.)
A word inherit (margin value can be inherited from parent element)

It should be noted that negative values are also allowed. Here is a list of CSS properties that are implemented to provide margins on HTML elements.

CSS Property	Description
margin	The CSS margin property is used as shorthand for its different properties as a single declaration.
margin-top	The CSS margin-top is used to indicate the top margin for your element.
margin-right	The CSS margin-right is used to indicate the right margin for your element.
margin-bottom	The CSS margin-bottom is used to indicate the bottom margin for your element.
margin-left	The CSS margin-left is used to indicate the left margin for your element.

Here is a sample code snippet showing the implementation of all four (top, right, bottom, and left) CSS margin properties:

Example:

Shorthand Margin Property

It is probable for shortening your CSS to specify all four (top, right, bottom, and left) margin properties under a single property. The margin property, as discussed above, is the individual margin properties. To use shorthand, you must use the margin property, which includes four other margin properties.

Example:

So, let’s look at the example above to see how shorthand margin property works:

In case you have margin properties with four values:

top margin is 30px
right margin is 40px
bottom margin is 65px
left margin is 90px

When padding margin property has three values:

top margin is 30px
right and left margins are 40px
bottom margin is 65px

When padding margin property has two values:

top and bottom margins are 30px
right and left margins are 40px

When padding margin property has one value:

all four margins are 30px

Margin Value auto

The CSS margin value auto is used to center HTML elements horizontally in its container. It can be implemented like this:

Example:

Margin Value inherit

It is also possible to inherit margin values from the parent element to child elements. This is how it can be implemented:

Example:

Difference Between CSS Padding and Margin

The CSS margin is almost identical to the CSS padding attribute except for one significant difference: a margin defines the white space around the HTML element’s edge. In contrast, padding refers to white space within the element boundary.

report this ad

Центрирование абсолютно позиционированных элементов

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

В другой спецификации W3C сказано:

«Если для всех трех позиций (“left”, “width” и “right”) задано значение «auto», сначала установите 0 для “margin-left” и “margin-right…» » Если «auto» задано только для “margin-left” и “margin-right», тогда решите уравнение с дополнительным условием, чтобы для обоих отступов была задана одинаковая ширина».

Здесь довольно подробно описана ситуация, касающаяся значения auto для горизонтальных отступов. Чтобы эти отступы имели одинаковый размер, для left, width и right не должно задаваться значение auto (их значение по умолчанию). Чтобы отцентрировать элемент по горизонтали, нужно задать определенное значение для ширины абсолютно позиционируемого элемента, а left и right при этом должны иметь равные значения.

В спецификации также упоминается что-то подобное и для отступов сверху CSS div.

«Если для «top», «height» и «bottom» задано значение «auto» , установите для «top» позицию static…»

«Если для одной из трех позиций не установлено значение «auto»: если для «top» и «bottom» установлено значение «auto», решите уравнение с дополнительным условием, чтобы задать для этих отступов одинаковые значения».

Следовательно, чтобы отцентрировать по вертикали абсолютно позиционируемый элемент top, height и bottom не должны иметь значение auto.

Теперь, объединив все это, мы получим следующее:

Syntax

The CSS margin property can be expressed with one, two, three or four values provided. And each value can be expressed as either a fixed value or as a percentage.

One Value

The syntax for the CSS margin property (with 1 value) is:

When one single value is provided, the margin value will apply to all four sides of the element (ie: top, right, bottom, left).

Two Values

The syntax for the CSS margin property (with 2 values) is:

When two values are provided, the first value will apply to the top and bottom of the element. The second value will apply to the left and right sides of the element.

Three Values

The syntax for the CSS margin property (with 3 values) is:

When three values are provided, the first value will apply to the top of the element. The second value will apply to the right and left sides of the element. The third value will apply to the bottom of the element.

Four Values

The syntax for the CSS margin property (with 4 values) is:

When four values are provided, the first value will apply to the top of the element. The second value will apply to the right side of the element. The third value will apply to the bottom of the element. The fourth value will apply to the left side of the element.

The top, right, bottom, and left margin values can be one of the following:

Padding в CSS и Margin в CSS

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

Обычная запись:

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

С другой стороны, сокращенная запись в CSS объединяет в себе все эти свойства в одно общее свойство «padding«.

Краткая запись:

padding: 10px 20px 40px 10px;

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

padding: TOP RIGHT BOTTOM LEFT;  (padding: сверху справа снизу слева)

Эту запись можно сократить запись до трех значений, если левый и правый padding/margin одинаковы. Например, если верхний отступ равен 30px, левый и правый по 10px, а нижний — 40px, то можно использовать следующую форму записи:

padding: 30px 10px 40px;

Обнуление margin

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

для <body> по умолчанию margin задан как 8px;
для списков <ul>, <ol>, <dl> margin-top и margin-bottom заданы как 1em;
для <blockquote> и <figure> margin-left и margin-right заданы как 40px.

Эти margin, согласно макету, не всегда нужны, поэтому их можно обнулить, иными словами, задать для margin нулевое значение. В примере 5 показано обнуление margin для элемента <body>, после чего элемент <header> плотно прилегает к краям браузера.

Пример 5. Обнуление margin

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>margin</title>
<style>
body {
margin: 0; /* Обнуляем */
}
header {
background: #D4E3A5; /* Цвет фона */
padding: 1em; /* Поля вокруг текста */
}
</style>
</head>
<body>
<header><h1>Кря-кря</h1></header>
</body>
</html>

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

Рис. 6. Обнуление margin у <body>

Отмена схлопывания margin

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

Схлопывание margin не срабатывает:

для элементов с абсолютным позиционированием, т. е. таких, у которых position установлено как absolute или fixed;
для обтекаемых элементов (для них свойство float задано как left или right);
для строчных или строчно-блочных элементов (для них свойство display задано как inline или inline-block);
для флекс-элементов (у родителя которых свойство display задано как flex или inline-flex);
для элемента <html>.

Схлопывание не действует на дочерние элементы:

если у родителя значение overflow задано как auto, hidden или scroll;
если у родителя на стороне схлопывания задано свойство padding;
если у родителя на стороне схлопывания задано свойство border.

Учтите, что свойства padding и border должны иметь размер больше нуля, к примеру, 1px.

Возьмём пример 4 и доработаем его, чтобы margin у заголовка работал внутри блока. Для этого к родительскому блоку добавляем свойство padding со значением 0.1px. На экране такая величина будет незаметна, но браузеры её понимают и схлопывание margin отменяют (пример 5).

Пример 5. Отмена схлопывания margin

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>margin</title>
<style>
.block {
background: #FCE3EE; /* Цвет фона блока */
padding: 0.1px 0; /* Отменяем схлопывание */
}
h1 {
background: #E2EDC1; /* Цвет фона заголовка */
}
</style>
</head>
<body>
<div class=»block»>
<h1>Заголовок</h1>
</div>
<p>Текст снизу</p>
</body>
</html>

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

Рис. 9. margin у дочернего элемента

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

Для соседних элементов схлопывание margin отменять, как правило, нет необходимости, поскольку результат достаточно предсказуем — надо только помнить о поведении margin или включать margin-top или margin-bottom лишь для одного элемента. В примере 6 расстояние между блоков регулируется значением margin-bottom у block1. Здесь этот margin единственный, поэтому никакого объединения не происходит и вертикальный промежуток между блоков равен значению margin-bottom.

Пример 6. Расстояние между блоков

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>margin</title>
<style>
.block {
padding: 20px; /* Поля вокруг текста */
border: 1px solid #666; /* Параметры рамки */
}
.block1 {
background: #E2EDC1; /* Цвет фона первого блока */
margin-bottom: 30px; /* Отступ снизу */
}
.block2 {
background: #FCE3EE; /* Цвет фона второго блока */
}
</style>
</head>
<body>
<div class=»block block1″>Первый блок</div>
<div class=»block block2″>Второй блок</div>
</body>
</html>

Для полноты картины приведём несколько вариантов, когда схлопывание margin у соседних блоков не работает. Данный стиль можно добавить к каждому блоку или только к одному. Ширина элемента с float определяется содержимым элемента, поэтому надо явно задать ширину блока, равную 100%. За счёт этого не ломается вёрстка, потому что нет места для обтекания элемента.

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

Класс parent надо добавить к родителю наших блоков.