Блочная модель HTML

9.1 Блочные элементы

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

Блочная модель HTML состоит из двух основных типов элементов: блочные и строчные. Эти элементы играют ключевую роль в верстке веб-страниц.

Блочные элементы

Пример блочного элемента:

    
      <div>
        <h1>Заголовок</h1>
        <p>Это абзац текста внутри блочного элемента div.</p>
      </div>
    
  

9.2 Строчные элементы

Строчные элементы (inline-level elements) занимают только необходимую для их содержания ширину и не начинаются с новой строки. Они могут содержать только строчные элементы или текст. Примеры строчных элементов:

Пример строчного элемента:

    
      <span>Это абзац с <strong>жирным текстом</strong> и <em>курсивом</em>.</span>
    
  

9.3 Составляющие блочной модели

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

• Контент (Content): внутренний контент элемента, например, текст или изображение
• Внутренний отступ (Padding): пространство между контентом и границей элемента
• Граница (Border): линия, окружающая внутренний отступ и контент
• Внешний отступ (Margin): пространство между границей элемента и соседними элементами

Визуализация блочной модели:

    
      .element {
        width: 200px;           /* Ширина контента */
        padding: 10px;          /* Внутренний отступ */
        border: 2px solid red;  /* Граница */
        margin: 20px;           /* Внешний отступ */
      }
    
  

Пример HTML с блочной моделью:

В этом примере элемент <div> с классом "box" имеет ширину 200px, внутренний отступ 10px, границу 2px и внешний отступ 20px. Эти свойства определяют, как элемент отображается на странице и взаимодействует с другими элементами.

    
      .box {
        width: 200px;
        padding: 10px;
        border: 2px solid red;
        margin: 20px;
      }
    
  

    
      <div class="box">
        Это пример блочной модели.
      </div>
    
  

1

Задача

Модуль 1: Web Core, 4 уровень, 8 лекция

Недоступна

Блочный элемент

Блочный элемент

Открыть

1

Задача

Модуль 1: Web Core, 4 уровень, 8 лекция

Недоступна

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

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

Открыть