HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Учебник по CSS

ГЛАВНАЯ CSS Введение в CSS Синтаксис CSS Селекторы CSS CSS как сделать CSS-комментарии Цвета CSS
Цвета RGB Шестнадцатеричный ВСЛ
CSS-фоны
Фоновый цвет Фоновая картинка Повторение фона Фоновое приложение Фоновая стенография
CSS границы
Границы Ширина рамки Цвет границы Пограничные стороны Пограничная стенография Закругленные границы
CSS поля
Поля Свернуть поля
CSS-заполнение CSS высота/ширина Блочная модель CSS Схема CSS
Контур Outline Width Outline Color Outline Shorthand Outline Offset
CSS-текст
Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow
CSS-шрифты
Font Family Font Web Safe Font Fallbacks Font Style Font Size Font Google Font Pairings Font Shorthand
CSS-иконки CSS-ссылки CSS-списки CSS-таблицы
Table Borders Table Size Table Alignment Table Style Table Responsive
Отображение CSS Максимальная ширина CSS Позиция CSS CSS Z-индекс CSS переполнение Плавающая CSS
Float Clear Float Examples
Встроенный блок CSS Выравнивание CSS Комбинаторы CSS Псевдокласс CSS CSS-псевдоэлемент Непрозрачность CSS Панель навигации CSS
Navbar Vertical Navbar Horizontal Navbar
Выпадающие списки CSS Галерея изображений CSS Спрайты изображений CSS Селекторы атрибутов CSS CSS-формы CSS-счетчики CSS макет веб-сайта Единицы CSS Специфика CSS CSS! важно Математические функции CSS

CSS расширенный

CSS закругленные углы Изображения границ CSS CSS-фоны Цвета CSS Цветовые ключевые слова CSS CSS-градиенты
Linear Gradients Radial Gradients Conic Gradients
CSS-тени
Shadow Effects Box Shadow
Текстовые эффекты CSS Веб-шрифты CSS 2D-преобразования CSS CSS 3D-преобразования CSS-переходы CSS-анимации Подсказки CSS Изображения в стиле CSS Отражение изображения CSS CSS объект-подгонка CSS-позиция объекта Маскировка CSS CSS-кнопки Разбивка на страницы CSS Несколько столбцов CSS Пользовательский интерфейс CSS CSS-переменные
The var() Function Overriding Variables Variables and JavaScript Variables in Media Queries
Размер блока CSS Медиа-запросы CSS Примеры CSS MQ CSS флексбокс
CSS Flexbox CSS Flex Container CSS Flex Items CSS Flex Responsive

CSS Отзывчивый

Введение в задний привод Окно просмотра RWD Представление сетки RWD Медиа-запросы RWD Изображения RWD Видео с задним приводом Рамки RWD Шаблоны RWD

CSS -сетка

Введение в сетку Контейнер сетки Элемент сетки

CSS SASS

Учебник по SASS

Примеры CSS

CSS-шаблоны Примеры CSS css викторина CSS-упражнения Сертификат CSS

Ссылки на CSS

Справочник по CSS Селекторы CSS CSS-функции Справочник по CSS Безопасные веб-шрифты CSS CSS анимация Единицы CSS Конвертер CSS PX-EM Цвета CSS Значения цвета CSS Значения CSS по умолчанию Поддержка CSS-браузера

Свернуть поля CSS

❮ Предыдущий Следующий ❯

Иногда два поля сливаются в одно поле.

Свернуть поля

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

Это не происходит на левом и правом полях! Только верхнее и нижнее поля!

Посмотрите на следующий пример:

Пример

Демонстрация коллапса маржи:

h1 {
  margin: 0 0 50px 0;
}

h2 {
  margin: 20px 0 0 0;
}

В приведенном выше примере элемент <h1> имеет нижнее поле 50 пикселей, а элемент <h2> имеет верхнее поле 20 пикселей.

Здравый смысл подсказывает, что вертикальное поле между <h1> и <h2> должно составлять в общей сложности 70 пикселей (50 пикселей + 20 пикселей). Но из-за коллапса поля фактическое поле становится равным 50px.

Проверьте себя с помощью упражнений

Упражнение:

Добавьте левое поле в 20 пикселей к элементу <h1>.

<style>
h1 {
  : 20px;
}
</style>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph</p>
  <p>This is a paragraph</p>
</body>

Все свойства поля CSS

Property Description
margin A shorthand property for setting the margin properties in one declaration
margin-bottom Sets the bottom margin of an element
margin-left Sets the left margin of an element
margin-right Sets the right margin of an element
margin-top Sets the top margin of an element

❮ Предыдущий Следующий ❯