Что такое margin в html

Свойство margin

Свойство margin задаёт отступы вокруг элемента. У него есть несколько особенностей, которые мы здесь рассмотрим.

Объединение отступов

Вертикальные отступы поглощают друг друга, горизонтальные – нет.

Например, вот документ с вертикальными и горизонтальными отступами:

  
Горизонтальный 20px ← 40px → 20px Отступ 
 
Вертикальный 20px
 

Расстояние по горизонтали между элементами SPAN равно 40px , так как горизонтальные отступы по 20px сложились.

А вот по вертикали расстояние от SPAN до P равно 20px : из двух вертикальных отступов выбирается больший max(20px, 15px) = 20px и применяется.

Отрицательные margin-top/left

Отрицательные значения margin-top/margin-left смещают элемент со своего обычного места.

В CSS есть другой способ добиться похожего эффекта – а именно, position:relative . Но между ними есть одно принципиальное различие.

При сдвиге через margin соседние элементы занимают освободившееся пространство, в отличие от position: relative , при котором элемент визуально сдвигается, но место, где он был, остаётся «занятым».

То есть, элемент продолжает полноценно участвовать в потоке.

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

Например, есть документ с информационными блоками:

• водительское удостоверение на право управления транспортным средством соответствующей категории;
• . и так далее.

Использование отрицательного margin-top позволяет вынести заголовки над блоком.

/* вверх чуть больше, чем на высоту строки (1.25em) */ h2

А вот, что бы было при использовании position :

При использовании position , в отличие от margin , на месте заголовков, внутри блоков, осталось пустое пространство.

Пример: вынос разрыва

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

 
Заголовок
 
Текст Текст Текст.
 

Пример документа с такими разрывами:

Для красоты мы хотим, чтобы разрыв HR начинался левее, чем основной текст. Отрицательный margin-left нам поможет:

/*+ no-beautify */ hr.margin < margin-left: -2em; >/* для сравнения */ hr.position

Обратите внимание на разницу между методами сдвига!

• hr.margin сначала сдвинулся, а потом нарисовался до конца блока.
• hr.position сначала нарисовался, а потом сдвинулся – в результате справа осталось пустое пространство.

Уже отсюда видно, что отрицательные margin – исключительно полезное средство позиционирования!

Отрицательные margin-right/bottom

Отрицательные margin-right/bottom ведут себя по-другому, чем margin-left/top . Они не сдвигают элемент, а «укорачивают» его.

То есть, хотя сам размер блока не уменьшается, но следующий элемент будет думать, что он меньше на указанное в margin-right/bottom значение.

Например, в примере ниже вторая строка налезает на первую:

 
Первый
 
Второй div думает, что высота первого на 0.5em меньше
 

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

Итого

• Отрицательные margin-left/top сдвигают элемент влево-вверх. Остальные элементы это учитывают, в отличие от сдвига через position .
• Отрицательные margin-right/bottom заставляют другие элементы думать, что блок меньше по размеру справа-внизу, чем он на самом деле.

Отличная статья на тему отрицательных margin : The Definitive Guide to Using Negative Margins

Задачи

Нерабочие margin?

важность: 3

В примере ниже находится блок .block фиксированной высоты, а в нём – прямоугольник .spacer .

При помощи margin-left: 20% и margin-right: 20% , прямоугольник центрирован в родителе по горизонтали. Это работает.

Далее делается попытка при помощи свойств height: 80% , margin-top: 10% и margin-bottom: 10% расположить прямоугольник в центре по вертикали, чтобы сам элемент занимал 80% высоты родителя, а сверху и снизу был одинаковый отступ.

Однако, как видите, это не получается. Почему? Как поправить?

 .block < height: 150px; border: 1px solid #CCC; background: #eee; >.spacer 
Ошибка заключается в том, что margin при задании в процентах высчитывается относительно ширины. Так написано в стандарте.
При этом не важно, какой отступ: левый, правый. верхний или нижний. Все они в процентах отсчитываются от ширины. Из-за этого и ошибка.
Ситуацию можно исправить, например, заданием margin-top/margin-bottom в пикселях, если это возможно или, в качестве альтернативы, использовать другие средства, в частности, position или padding-top/padding-bottom на родителе.
Расположить текст внутри INPUT
важность: 5
Создайте с цветной подсказкой внутри (должен правильно выглядеть, не обязан работать):
В дальнейшем мы сможем при помощи JavaScript сделать, чтобы текст при клике пропадал. Получится красивая подсказка.
P.S. Обратите внимание: type="password" ! То есть, просто value использовать нельзя, будут звёздочки. Кроме того, подсказка, которую вы реализуете, может быть как угодно стилизована.
P.P.S. Вокруг INPUT с подсказкой не должно быть лишних отступов, блоки до и после продолжают идти в обычном потоке.
Подсказка
Надвиньте элемент с текстом на INPUT при помощи отрицательного margin .
Решение
Надвинем текст на INPUT при помощи отрицательного margin-top . Поднять следует на одну строку, т.е. на 1.25em , можно для красоты чуть больше – 1.3em :
Также нам понадобится обнулить «родной» margin у INPUT , чтобы не сбивал вычисления.
 input < margin: 0; width: 12em; >#placeholder 
css властивість margin
Властивість margin - встановлює зовнішні відступи (поля) навколо елемента. Таким відступом є простір від грані поточного елемента до внутрішнього краю його батьківського елемента.

Це універсальна властивість і її поведінка залежить від кількості значень. Поведінку властивості margin при різній кількості значень наведено нижче:


Кількість значень
Поведінка властивості




1
Поля будуть встановлені для всіх сторін


2
Перше значення встановить відступ зверху та знизу, друге - відступи праворуч та ліворуч.


3
Перше значення встановлює відступ зверху, друге значення одночасно,встановить ліве та праве поле, третє значення - відступ знизу.


4
Послідовно встановить відступи для верхнього, правого, нижнього та лівого країв.




margin - це властивість, яка приймає до чотирьох значень:
Якщо встановлено менше чотирьох значень, то відсутні значення приймаються на основі визначених. Наприклад, наступні два набори правил отримають однакові результати:
.box < margin: 0 1.5em; >.box
Кожна з властивостей margin може також приймати значення auto . Значення автоматично в основному повідомляє браузеру, щоб визначити margin для вас. У більшості випадків значення автоматично буде еквівалентно значенню 0 (яке є початковим значенням для кожної властивості margin ), або ж будь-який простір доступний на тій стороні елемента.
.container
У цьому прикладі робиться дві речі, щоб орієнтувати цей елемент горизонтально у межах доступного простору:

Елементу задано вказану ширину
Лівий та правий поля встановлюються автоматично

Без зазначеної ширини значення автоматично не матимуть ніякого ефекту, встановивши лівий та правий поля до 0 або будь-який інший доступний простір всередині батьківського елемента.
Слід також зазначити, що auto корисно тільки для горизонтального центрування, і тому використання auto для верхнього і нижнього полів не буде центрувати елемент по вертикалі.
Якщо елемент не має батька, відступ буде розраховуватись до краю вікна браузера. Пам'ятай, що у вікна браузера теж встановлені відступи. Щоб їх позбутися, слід встановлювати значення margin для елемента рівним нулю.
Властивість margin може приймати від'ємні значення. Також за допомогою ключового значення auto ми можемо центрувати елементи відносно батьківського блоку:
У блокових елементів розташованих поруч один з одним по вертикалі ( margin-top та margin-bottom ) спостерігається ефект об'єднання, коли відступи не сумуються, а об'єднуються між собою. Саме об'єднання діє на два і більше блоку (один може бути вкладений всередину іншого) з відступами зверху чи знизу, при цьому примикають відступи комбінуються в один. Для відступів зліва і справа об'єднання ніколи не застосовується. Незважаючи на те, що об'єднуючі поля можуть здаватися, на перший погляд, нелогічними, вони насправді корисні:


Вони не дозволяють порожнім елементам додавати додатковий, зазвичай небажаний, вертикальний проміжок.
Вони дозволяють більш простіше керувати відступами на сторінці. Наприклад, заголовки та параграфи зазвичай мають вертикальні поля. Якщо поля не згортатимуться, то відступ між заголовкам та параграфом будуть набагато більшими ніж у параграфів, в такому випадку веб-майстру потрібно буде коригувати їх, щоб досягти однакових вертикальних інтервалів.
Для вкладених елементів, дозволяє компенсувати поле для внутрішнього елемента та його батька. На малюнку видно, що поля об'єдналися в одне, розміром 10 px (Найбільше поле, що у внутрішнього елемента). А не сумувалися в 15px. Як видно, в такому випадку дочірній елемент підштовхнув свого батька на 5px вниз.

Схлопування не спрацьовує:

для елементів, у яких на стороні схлопування задано властивість padding .
для елементів, у яких на стороні схлопування задана межа;
на елементах з абсолютним позиціонуванням, тобто таких, у яких position встановлено як absolute ;
на плаваючих елементах (для них властивість float задано як left або right );
для строкових елементів;
для .

Свойство margin
Свойство margin устанавливает пустое пространство от внешнего края border , padding или содержимого блока (рис. 1). Под margin нет своего фона и он принимает фон родительского элемента.

margin в основном используется для создания вертикальных и горизонтальных отступов между элементами. Аналогично другим блочным свойствам есть свойства для каждой стороны — margin-top, margin-right, margin-bottom и margin-left, соответственно устанавливающие отступ сверху, справа, снизу и слева. В примере 1 пространство между двумя вертикальными блоками задаётся с помощью свойства margin-bottom .
Пример 1. Расстояние между блоков
Результат данного примера показан на рис. 2.

Рис. 2. Расстояние между блоков
Значения margin
В качестве значений margin используются любые допустимые единицы длины, к примеру, пиксели, проценты, em, rem и др. В отличие от padding свойство margin может быть отрицательным (например: -10px), а также принимать значение auto . В остальном margin похоже на padding , у него также может быть от одного до четырёх значений.
Одно значение — определяет отступы для всех сторон блока.
margin: все стороны; margin: 10px;
Два значения — первое определяет отступы сверху и снизу для элемента, второе слева и справа для элемента.
margin: верх-низ лево-право; margin: 10px 20px;
Три значения — первое задаёт отступ сверху для элемента, второе одновременно слева и справа, а третье снизу.
margin: верх лево-право низ; margin: 10px 20px 5px;
Четыре значения — первое определяет отступ сверху, второе справа, третье снизу, четвёртое слева. Для запоминания последовательности можно представить часы — значения идут по часовой стрелке, начиная с 12 часов.
margin: верх право низ лево; margin: 5px 10px 15px 20px;
Значение auto
Свойство margin позволяет выравнивать элемент по центру горизонтали, если использовать значение auto и задать ширину элемента через width (пример 1).
Пример 2. Значение auto
Результат данного примера показан на рис. 3.

Рис. 3. Выравнивание блока по центру
Вместо margin: auto можно использовать комбинацию margin-left: auto и margin-right: auto .
Выравнивание блока по центру через значение auto работает только в сочетании с width .
Аналогично можно выровнять по центру горизонтали изображение, для этого даже не надо указывать ширину картинки, поскольку браузер получает её автоматически. Следует только превратить изображение в блочный элемент через свойство display, как показано в примере 3.
Пример 3. Значение auto

     

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

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

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

Таким образом, margin в процентах берётся от ширины всего блока, даже для margin-top и margin-botom .
Отрицательный margin
margin может быть задан с отрицательным значением, тем самым элемент сдвигается в противоположном направлении. К примеру, margin-top:-10px поднимает блок вверх на 10 пикселей, а margin-left:-10px сдвигает блок влево.
В примере 4 показан сдвиг блока с классом stat вверх, если он располагается сразу после элемента 
.
Пример 4. Использование отрицательного значения
Результат данного примера показан на рис. 5. Без отрицательного margin строки располагаются далеко друг от друга.

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

для по умолчанию margin задан как 8px;
для списков

,

, margin-top и margin-bottom заданы как 1em;
для и margin-left и margin-right заданы как 40px.

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

  

Кря-кря

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

Рис. 6. Обнуление margin у
Автор: Влад Мержевич

Последнее изменение: 05.08.2023
Сделайте таблицу, как показано на рис. 1. Ширина таблицы составляет 80% и она выровнена по центру. Обратите внимание, что содержимое третьей колонки выровнено по центру.

    

   

Название
Цвет
Твердость по Моосу
Формула


Алмаз
Белый
10
C


Рубин
Красный
9
Al2O3


Аметист
Голубой
7
SiO2


Изумруд
Зеленый
8
Be3Al2(SiO3)6


Сапфир
Голубой
9
Al2O3


   
Создайте веб-страницу, как показано на рис. 1.

    

   

ВТ


Солнечно

СР


Облачно

ЧТ


Дождливо


   
См. также

margin
margin в CSS
Абсолютное позиционирование
Блочные элементы
Выравнивание с помощью флексбоксов
Колесо для сокращённых свойств
Открываем блочную модель
Строчные элементы
Схлопывающиеся margin

Рецепты

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

Чем отличаются padding и margin
У этого элемента есть пока невидимая граница border . Если мы отобразим эту границу, то увидим, что она прилипла к тексту.

А если поставим два таких элемента рядом, они почти прилипнут друг к другу, потому что между ними нет пространства:
HTML CSS 

Padding
Чтобы отодвинуть рамку нужен padding — внутреннее пространство между содержимым элемента и его границей border .
⭐ Padding — внутренний отступ.
Вот padding: 0px :

padding можно задать отдельно сверху, справа, снизу и слева (то есть по часовой стрелке, начиная сверху). Или задать отдельно для верха-низа и право-лево, или вообще одинаковый для всех сторон.
.text < padding: 10px 20px 30px 40px; // все отдельно padding: 10px 30px; // верх-низ 10, право-лево 30 padding: 10px; // все отступы 10 >
Или даже все стороны по отдельности — вот так. Это аналог выражения padding: 10px 20px 30px 40px;
.text
Все варианты padding одной картинкой:

Margin
margin — пространство от border , padding или контента до соседних элементов. Задаётся по такой же логике и тоже по часовой стрелке.
⭐ margin — внешний отступ.
margin тоже можно задавать отдельно для всех сторон или сделать сразу одинаковым.
.text < margin: 25px 20px 15px 10px; // все отдельно margin: 25px 15px; // верх-низ 25, право-лево 15 margin: 25px // все отступы 25 >
Внутренние и внешние отступы одной картинкой:

⭐ padding — внутри элемента, margin — снаружи.
Вот и вся разница.
Больше статей о выборе

Ссылки или кнопки
Флексы или гриды
Чем отличаются HTTP-методы GET и POST

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше

Новое в 2023 — text-wrap: balance
В 2023 в CSS появилось любопытное свойство text-wrap со значением balance . Оно «уравновешивает» текстовые элементы, чтобы они приятнее выравнивались внутри блока.
Ограничение — текст не длиннее 6 строк, иначе браузеру придётся непросто, и лучше не применять это свойство к body .
Вот пример заголовка c text-wrap: balance и без него.
На момент написания заметки свойство поддерживается во всех больших браузерах, кроме Safari, а на мобильных — только в Chrome, но то ли ещё будет.

13 ноября 2023


Знакомство с CSS
После того как мы разобрались с базовой структурой веб-страницы с помощью HTML, пришло время привнести в неё стиль и красоту. В этом нам поможет CSS, что означает Cascading Style Sheets, или «каскадные таблицы стилей».
Что такое CSS?
CSS используется для оформления HTML-страниц. Если HTML — это скелет сайта, то CSS — его одежда. С помощью CSS мы можем задавать цвета, шрифты, отступы, добавлять анимации и многое другое.
Как подключить CSS к HTML
Есть несколько способов использования CSS внутри HTML:
Внутренний CSS: внутри раздела HTML-документа, в теге :
Внешний CSS: создание отдельного CSS-файла и его подключение с помощью элемента :
Инлайновые стили: непосредственно в HTML-элементе, через атрибут style . Но это не очень хороший способ, лучше его не использовать, и вот почему.
Этот текст будет красного цвета.
 
Основы синтаксиса CSS
CSS состоит из селекторов и объявлений. Селектор указывает, к какому элементу HTML применяется стиль, а объявление состоит из свойства и его значения.
/* Селектор */ p < /* Свойство : Значение; */ color: green; font-size: 14px; >
Работа с цветом и фоном
Одни из самых основных свойств в CSS — это цвет и фон элементов.
 color меняет цвет текста:
 background-color меняет фоновый цвет элемента:
Типографика и шрифты
CSS позволяет нам контролировать шрифты на странице:

font-family задаёт шрифт текста, даже если он нестандартный.
font-size определяет размер текста.
font-weight устанавливает жирность шрифта.

Блочная модель
Важной концепцией в CSS является блочная модель, которая включает в себя margin , border , padding , и content .
Внутренние и внешние отступы одной картинкой:
Позиционирование и Flexbox
Чтобы разместить элементы на странице, мы используем различные стратегии позиционирования, включая флексбоксы, которые позволяют нам упростить многие задачи.
.container < display: flex; /* Применяем Flexbox */ justify-content: center; /* Центрирование содержимого по горизонтали */ align-items: center; /* Центрирование содержимого по вертикали */ >
Адаптивный дизайн
С помощью медиа-запросов мы можем создавать адаптивный дизайн, чтобы наш сайт хорошо выглядел на разных устройствах.
@media (max-width: 600px) < .container < flex-direction: column; >> 
Это только начало пути в мир CSS, но зная эти основы, вы уже можете начать экспериментировать и применять стили к вашим веб-страницам. В следующей статье мы разберём JavaScript и увидим, как добавить интерактивность нашим веб-страницам. Удачи в творчестве и до новых встреч в коде! ����‍��

1 ноября 2023


Увеличение ссылки при наведении
Задача: плавно увеличить ссылку при наведении.
Решение:
a < display: inline-block; transition: transform 0.3s ease; >a:hover
Первые два свойства просто немного меняют вид ссылки. Свойство color: maroon; меняет цвет текста в тегах на темно-красный, а свойство text-decoration : none; убирает подчеркивание.
Но наша задача — плавно увеличить размер ссылки, а не просто её перекрасить. Поэтому используем свойство transform: scale(1.2) , которое срабатывает при наведении курсора и увеличивает размер ссылки в 1.2 раза по сравнению с её начальным размером.

13 октября 2023


WOFF больше не нужен
Я купил и скачал шрифты для недавнего проекта, распаковал папку, где были только WOFF2-файлы, и сначала не поверил, что такое бывает.
Потом мне стало интересно: они что, забыли WOFF? А он вообще ещё нужен? Ну, всё-таки, веб — это место, где постоянно всё меняется и улучшается, поэтому я пошёл и спросил людей в Mastodon. Ответ был единодушным: нужен только WOFF2!
Я хорошо помню пост от Зака в конце 2016, после которого я отказался от исчерпывающего синтаксиса @font-face , включавшего, вдобавок, TTF, EOT и SVG-шрифты, и перешёл только на WOFF2 и WOFF.
Похоже, с тех пор мир веб-шрифтов изменился ещё разок, и вот актуальная версия @font-face :
@font-face
Остался всего один формат. Просто, скажите?
Как писал Зак, «так как в вебе, когда шрифт не найден, всё равно подгружаются системные шрифты, мы можем идти в ногу со временем». Итак, какие браузеры отправятся в тёмные века системных шрифтов с этим синтаксисом?

IE 11, 10, 9, 8, 7, …
Chrome 4–35
Edge 12 и 13
Safari 3–9.1
Firefox 2–38
Opera 22 и ниже
Android 4.4.4 KitKat и ниже (а это
Safari на iOS 3.2–9.3

Caniuse.com показывает, что почти у 95% пользователей есть браузер с поддержкой WOFF2. А в относительной статистике (Date Relative — прим. перев.) заметно, что массовый переход на WOFF2 случился в 2015 и 2016. К концу 2016 во всех последних версиях больших браузеров появилась поддержка WOFF2.3
А спустя 7 лет поддержка расширилась настолько, что можно уже не добавлять в проект WOFF-файлы — ну, кроме случая, когда вы точно знаете, что много ваших пользователей используют старые устройства и браузеры.
С другой стороны, нет смысла и удалять WOFF из старых проектов. Если вы подключали WOFF2 раньше WOFF внутри @font-face — и порядок здесь важен — то браузер просто скачает и подключит WOFF2-версию.
И если однажды вы, как и я, обнаружите себя перед папкой, полной файлов WOFF2, знайте, что WOFF — уже всё.

23 сентября 2023


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

7 сентября 2023


Как сделать тёмную тему на сайте
Без лишних слов создадим простой переключатель для светлой и темной темы с использованием HTML, CSS и JavaScript. Нам понадобятся три файла — index.html , styles.css и script.js .
HTML
Основная разметка страницы — заголовок, абзац текста, список и текст в рамке.
CSS (styles.css):
Здесь задаём цвета для светлой и тёмной темы, а ещё минимальную стилизацию текста и блока с рамкой.
body < font-family: Arial, sans-serif; transition: background-color 0.3s ease; >body.light-theme < background-color: #ffffff; color: #000000; >body.dark-theme < background-color: #121212; color: #ffffff; >.boxed-text
JavaScript (script.js)
Этот код нужен, чтобы переключать тему при нажатии на кнопку:
document.getElementById('themeToggle').addEventListener('click', function() < const currentTheme = document.body.className; if (currentTheme === 'light-theme') < document.body.className = 'dark-theme'; >else < document.body.className = 'light-theme'; >>); 
При загрузке страницы по умолчанию будет установлена светлая тема. При нажатии на кнопку «Переключить тему» будет происходить переключение между светлой и темной темой.

29 августа 2023


4 способа центрировать текст в CSS
Центрирование элементов на веб-странице — это одна из наиболее распространенных задач, с которой мы сталкиваемся при работе с макетами. И хотя центрирование текста по горизонтали довольно простое ( text-align: center; и делов-то), вертикальное центрирование может быть немного сложнее. Давайте рассмотрим несколько методов.
Метод 1: Flexbox
Flexbox — это один из самых простых и эффективных способов центрирования.
Заворачиваем текст в с классом center-both :
 
Центрированный текст
 
 
.center-both
Метод 2: CSS Grid
HTML такой же, как в предыдущем примере. В CSS включаем гриды и используем свойство place-items со значением center :
.center-both
Метод 3: позиционирование и Transform
Этот метод немного старомодный и работает не идеально. Здесь у div устанавливается relative позиция. А 
внутри дива мы сдвигаем с помощью абсолютного позиционирования. Не слишком элегантно:
.center-both < position: relative; >.center-both p
HTML остается таким же. Вот что получается:
Плохой метод: использование line-height
Если у вас однострочный текст, вы можете установить line-height , равный высоте родительского элемента.
.center-both < line-height: 200px; /* Пример высоты */ text-align: center; >
Этот метод не подойдет для многострочного текста. Да и вообще мы очень не рекомендуем так делать, это прям совсем для любителей острых ощущений. Потому что вот:
Если вам интересно узнать больше о каждом из этих методов, рекомендуем посмотреть документацию по Flexbox на MDN или документацию по CSS Grid на MDN, а ещё пройти курсы в HTML Academy.

28 августа 2023


Как скруглить рамку. CSS-свойство border-radius
CSS-свойство border-radius помогает скруглить углы элемента. Оно особенно полезно для стилизации кнопок, форм, карточек товаров и других элементов сайта.

28 июля 2023


CSS-свойство contain
Представьте, что у вас есть контейнер. Внутри него находятся разные элементы: текст, изображения или что-то другое. Свойство contain говорит браузеру, как именно элементы должны взаимодействовать. Например, они могут быть ограничены, влиять на расположение друг друга или менять свои размеры.
Также свойство помогает повысить производительность страницы. Например, браузер понимает, когда при изменении свойств элемента нужно перерисовать страницу, а когда нет.
⭐ CSS-свойство contain определяет, как элемент должен взаимодействовать с другими элементами внутри контейнера.
Синтаксис
.container

14 июля 2023


Как задать позицию и размер элемента. CSS-свойство inset
CSS-свойство inset задаёт позицию и размер элемента на странице. Это комбинация четырёх отдельных свойств: top , right , bottom и left , которые определяют отступы от верхнего, правого, нижнего и левого края элемента.
Синтаксис
.element

13 июля 2023



Похожие публикации:

Как одновременно подключить колонки и наушники windows 10
Как остановить sql server
Как снять привод на toyota celica
Что такое язык python