IGS Internet

IGS Internet
Вернуться к Курс

Базовый курс HTML CSS

0% Завершено
0/26 Шагов
  1. 1) Как создать сайт
  2. 2) Программы, с помощью которых создаются файлы на HTML и CSS
  3. 3) Язык гипертекстовой разметки HTML
  4. 4)Хостинг. Cервер. Доменное имя.
  5. 5) Каскадные таблицы стилей CSS
  6. 6) Структура,Гиперссылка
  7. 7)Практика
  8. 8) Списки
  9. 9)Изображение
  10. 10)display. Таблицы
  11. 11) Flexbox CSS
  12. 12) Padding, margin
  13. 13)Grid Layout
  14. 14) Практика
  15. 15) Вёрстка шапки, шрифты
  16. 16) Позиционирование. Вёрстка блока Smoothie
  17. 17) Вёрстка блок About. Псевдоэлемент
  18. 18) Псевдоклассы в CSS.Вёрстка блока fruits.
  19. 19) Вёрстка блок team, calc, псевдоэлементы
  20. 20) Вёрстка блока footer
  21. 21) CSS3-анимация
  22. 22) Адаптивная вёрстка. Mobile First
  23. 23) Препроцессоры в CSS
  24. 24) Форма обратной связи + Гео-карты на сайте
  25. 25)День домашних работ
  26. 24) Гео-карты на сайте
Базовый курс HTML CSS 12) Padding, margin
В прогрессе
Урок 12 из 26
В прогрессе

12) Padding, margin

  • margin
  • padding

Поля и отступы CSS: отличия свойств margin и padding

Создавать промежутки между элементами можно и тем, и другим способом, но если padding – это отступ от содержимого до края блока, то margin – это расстояние от одного блока до другого, межблоковое пространство. На скриншоте показан наглядный пример:

padding и margin
Padding отделяет содержимое от границы блока, а margin создает промежутки между блоками

 

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

Для установки полей или отступов в CSS от каждой стороны элемента существуют следующие свойства:
Отступы:

  • padding-top: значение;
  • padding-right: значение;
  • padding-bottom: значение;
  • padding-left: значение;

Поля:

  • margin-top: значение;
  • margin-right: значение;
  • margin-bottom: значение;
  • margin-left: значение;

 

Значения могут быть указаны в любых единицах CSS – px, em, % и т. д. Пример: margin-top: 15px.

Также существует очень удобная вещь как сокращенная запись margin и padding CSS. Если вам необходимо задать поля или отступы для всех четырех сторон элемента, совсем необязательно записывать свойство для каждой стороны по отдельности. Всё делается проще: для margin и padding можно указывать сразу 1, 2, 3 или 4 значения. От количества значений зависит, как распределяются настройки:

  • 4 значения: задаются отступы для всех сторон элемента в такой последовательности: сверху, справа, снизу, слева: 
    padding: 2px 4px 5px 10px;
  • 3 значения: задается отступ сначала для верхней стороны, потом одновременно для левой и правой, а затем – для нижней: 
    padding: 3px 6px 9px;
  • 2 значения: задаются отступы сначала одновременно от верхней и нижней стороны, а затем – одновременно для левой и правой: 
    padding: 6px 12px;
  • 1 значение: задаются одинаковые отступы для всех сторон элемента: 
    padding: 3px;

Те же правила касаются и свойства margin CSS. Обратите внимание на то, что для margin можно использовать и отрицательные значения (например, -3px), которые иногда бывают весьма полезными

 

Центрирование в CSS:

Строчные элементы внутри родительского блочного можно центрировать так:

.center-children {
  text-align: center;
}

Является ли элемент блочным?

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

.center-me {
  margin: 0 auto;
}

Задание

Обязательно:

  1.  Легкий уровень:
    1.  Задание 1:- КЛИК
    2.  Задание 2:- КЛИК
    3.  Задание 3:- КЛИК
  2.  Сложный уровень — КЛИК
  3.  Ссылку скинуть в дискорд

 

Для выполнения домашней работы Вам понадобится:

*{
padding: 0;
margin: 0;
}