Строчные элементы и блочные: Блочные и строчные элементы

Блочные и строчные элементы HTML. Свойство display CSS — учебник CSS

В HTML существует два типа элементов — блочные (block elements) и строчные (inline elements). Ниже вы узнаете особенности этих элементов и разницу между ними, а также способы управлять ими через правила CSS.
 

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

Блочные элементы являются основой, которая используется для верстки веб-страниц. Такой элемент представляет собой прямоугольник, который по умолчанию занимает всю доступную ширину страницы (если иное значение не указано в CSS), а длина элемента зависит от его содержимого. Такой элемент всегда начинается с новой строки, то есть, располагается под предыдущим элементом. Блочный элемент может содержать в себе другие блочные и строчные элементы.

Примеры блочных элементов: <div>, <p>, <ul>, <ol>, <h2> и т. д.
 

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

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

Примеры строчных элементов: <a>, <span>, <strong>, <em>, <img> и т. д.
 

Блочные и строчные элементы HTML

Примечание: в HTML5 порядок вложения тегов такой роли не играет. Элементы уже не просто делятся на блочные и строчные, а группируются по смыслу и назначению, представляя собой категории контента.

CSS-свойство display: меняем тип элемента

При помощи крайне полезного свойства display в CSS можно заставить блочный элемент выглядеть как строчный и наоборот. Чтобы блочный элемент вел себя как inline-элемент (т. е. не переводился на новую строку), для него необходимо записать правило:

display: inline;

Если же необходимо отобразить строчный элемент как block-элемент (чтобы до и после элемента происходил перенос строки), запишите следующее:

display: block;

Действие {display:inline} и {display:block}

Также можно сделать «гибрид» — блочный элемент с поведением, как у строчного. В этом случае всё содержимое таких блочных элементов будет отображаться, как обычно, но при этом блоки будут вести себя как строчные элементы, выстраиваясь в одной строке друг за другом и переносясь на новую строку лишь при необходимости. Схлопывание margin в таких случаях перестает действовать. Для превращения элемента в блочно-строчный запишите:

display: inline-block;

Действие {display:inline-block}

Далее в учебнике: свойство CSS border. Вы узнаете, как добавлять границы для элементов веб-страницы и какие настройки к ним можно применить, используя каскадные таблицы стилей.

Строчные элементы | htmlbook.ru

Строчными называются такие элементы документа, которые являются непосредственной частью строки. К строчным элементам относятся теги <img>, <span>, <a>, <q>, <code> и др., а также элементы, у которых свойство display установлено как inline. В основном они используются для изменения вида текста или его логического выделения.

По аналогии с блочными элементами перечислю их характерные особенности.

• Внутрь строчных элементов допустимо помещать текст или другие строчные элементы. Вставлять блочные элементы внутрь строчных запрещено.
• Эффект схлопывания отступов не действует.
• Свойства, связанные с размерами (width, height) не применимы.
• Ширина равна содержимому плюс значения отступов, полей и границ.
• Несколько строчных элементов идущих подряд располагаются на одной строке и переносятся на другую строку при необходимости.
• Можно выравнивать по вертикали с помощью свойства vertical-align.

Строчные элементы удобно использовать для изменения вида и стиля текста,
в частности, отдельных символов и слов. Для этой цели обычно применяется универсальный
тег <span>, который самостоятельно никак не модифицирует
содержимое, но легко объединяется со стилями через классы или идентификаторы.
За счёт чего с помощью этого тега можно легко управлять видом и положением отдельных
фрагментов текста или рисунков.

Для вёрстки строчные элементы применяются реже, чем блочные. Это
связано в основном с тем, что внутрь строчных элементов не допускается вкладывать
контейнеры <div>, <p> и подобные широко распространённые теги. Тем не менее, блочные и строчные
элементы удачно дополняют друг друга, поскольку позволяют на всех уровнях менять
вид составляющих веб-страниц. В примере 3.16 показано использование тега <span>
для выделения отдельных слов.

Пример 3.16. Применение тега <span>

XHTML 1.0CSS 2.1IECrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Строчные элементы</title>
  <style type="text/css">
   . pose {
    background: #fc0; /* Цвет фона */
    margin-left: 1em; /* Отступ слева */
   }
   .press {
    padding: 1px; /* Поля вокруг текста */
    border: 1px dotted maroon; /* Параметры рамки */
    color: navy; /* Цвет текста */
   }
   .num {
    font-weight: bold; /* Жирное начертание */
    color: maroon; /* Цвет текста */
   }
  </style>
 </head>
 <body>
   <p><span>Лягте животом на пол</span>. 
    Соедините стопы вместе, согнув ноги в коленях и развернув их в стороны. 
    Руки за головой. Тяните голову руками вверх и вперед до полного 
    сокращения <span>мышц живота</span>. Задержитесь на две 
    секунды. Выполните <span>восемь</span> повторений.</p>
 </body>
</html>

Результат примера показан ниже (рис. 3.25).

Рис. 3.25. Текст, оформленный с помощью стилей

В данном примере тег <span> и стили используются
для выделения различными способами фрагментов текста. В частности, выделение
происходит за счёт фонового цвета, рамки вокруг текста и сменой его цвета. Обратите внимание, что в результате переноса текста рамка вокруг него также перенеслась на другую строку. Во многих случаях это выглядит не очень красиво, поэтому можно запретить перенос текста через white-space: nowrap.

Для текста, который не обрамлён строчным тегом вроде <span> создаётся анонимный строчный элемент. Для примера выше схема элементов будет следующей (рис. 3.26).

Рис. 3.26. Анонимные строчные элементы

Серым цветом на рисунке помечен текст внутри тега <span>, а пунктиром анонимные строчные элементы. Для таких элементов задать стиль напрямую нельзя, он наследуется от родителя.

Преобразование в строчный элемент

Строчные элементы можно превращать в блочные с помощью свойства display
и его значения block. Также возможно и обратное
действие через значение inline (пример 3.17).

Пример 3.17. Свойство display

XHTML 1. 0CSS 2.1IECrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Строчные элементы</title>
  <style type="text/css">
   .notetitle {
    border: 1px solid black; /* Параметры рамки */
    border-bottom: none; /* Убираем границу снизу */
    padding: 3px; /* Поля вокруг текста */
    display: inline; /* Устанавливаем как строчный элемент */
    background: #ffeebf; /* Цвет фона */
    font-weight: bold; /* Жирное начертание */
    font-size: 0.9em; /* Размер шрифта */
    margin: 0; /* Убираем отступы */
    white-space: nowrap; /* Запрещены переносы текста */
   }
   .note {
    border: 1px solid #634f36; /* Параметры рамки */
    background: #f3f0e9; /* Цвет фона */
    padding: 7px; /* Поля вокруг текста */
    margin: 0 0 1em 0; /* Значение отступов */
   }
  </style>
 </head>
 <body>
  <p>Примечание</p>
  <p>Исходя из различных критериев, основными из 
   которых являются показатели целесообразности и эффективности приложенных 
   усилий, можно однозначно сказать следующее.  А именно, что достижение 
   желаемых результатов требует гибкого подхода, основанного на опыте и 
   глубоком понимании смысла вышеизложенного.</p>
 </body>
</html>

Результат примера приведен на рис. 3.27.

Рис. 3.27. Замена блочного элемента на строчный

В данном примере блочный тег <p> отображается
на веб-странице как строчный элемент. Это требуется для того, чтобы ширина
фона и рамки равнялась ширине самого текста с учетом полей. Как известно,
ширина блочных элементов не зависит от ширины содержимого, поэтому и приходится
представлять тег <p> в виде строчного элемента.
В принципе, аналогичным решением будет использовать вместо <p>
тег <span>.

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

Блочная модель — Основы современной вёрстки

Основы современной вёрстки

Представьте себе процесс строительства дома. Условно его можно разделить на несколько этапов: возведение структуры дома и его отделка. При возведении дома мы заливаем фундамент, возводим стены, устанавливаем крышу. После этого уже переходим к покраске дома, устанавливаем окна и занимаемся декорированием.

Процесс создания вёрстки можно описать похожими процессами. В ней так же важна роль возведения структуры и отделки. Для этого существуют несколько основных типов элементов:

• Блочные элементы (Block level). Эти элементы отвечают за каркас страницы.
• Строчные элементы (Inline level). Они помогают нам в процессе стилизации страницы или добавления функциональных частей.

Важно: сами по себе элементы HTML не являются блочными или строчными. HTML — всего лишь разметка. За то, будет элемент блочным или строчным, отвечает CSS. Для всех HTML-тегов существуют стандартные модели вывода, которые по умолчанию настроены в браузере, поэтому понятие блочных и строчных элементов обычно соотносят с определёнными тегами, так как они имеют стандартное поведение при добавлении на страницу. В уроках соответствие тегов и значения условно, так как это поведение легко изменить с помощью CSS свойства display.

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

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

Представьте, что у вас есть шкаф и коробки с шириной, равной ширине шкафа. В этом случае мы не можем поставить коробки рядом друг с другом, так как для этого у нас не будет пространства. Единственное решение — класть коробки друг на друга. Блочные элементы ведут себя точно таким же образом.

В HTML-разметке такие коробки могли бы выглядеть следующим образом:

<div>Коробка №1</div>
<div>Коробка №2</div>
<div>Коробка №3</div>

На примере этой разметки уже стало понятно, что элемент div является блочным элементом. Он занимает всю доступную ширину, и из-за этого другие элементы не встают с ним в один ряд.

Стоит отдельно отметить понятие «занимает всю доступную ширину». Что же именно скрывается за этой доступной шириной? Ширина всей страницы, ширина экрана или ширина дороги близ деревни Ракушки? На самом деле доступная ширина — вся доступная ширина родителя. То есть, если наш блок лежит внутри body, то эта ширина будет равна именно ширине body. Стоит изменить ширину body, так сразу изменится и ширина блочного элемента внутри.

Какие же ещё элементы являются блочными? На самом деле их так много, что просто делать перечисление не очень верно. В процессе углубления в вёрстку вы сами обнаружите, какие элементы являются блочными. Основными же блочными элементами являются:

• div
• p
• Теги списков ul/ol/li
• Заголовки h2-h6

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

<div>
    <div>
        <h2>Заголовок статьи</h2>
    </div>
    <div>
        <p>А здесь находится текст статьи</p>
    </div>
</div>

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

Важно: хоть HTML и позволяет бесконечно вкладывать блоки друг в друга, лучше сохранять здравый смысл. Дело в том, что процесс вывода вёрстки достаточно долгий для браузеров. На это тратится довольно много ресурсов. И чем больше вложенность блоков друг в друга, тем сложнее браузеру и компьютеру всё это обработать.

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

1. Нельзя вкладывать заголовки в заголовки.
2. Нельзя вкладывать параграфы в параграфы.

Скорее всего с этим у вас проблем не возникнет, так как представить себе ситуацию с заголовком внутри заголовка достаточно трудно.

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

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

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

<div>
    <div>
        <h2>Заголовок статьи</h2>
    </div>
    <div>
        <p>А <a href="#">здесь</a> находится текст статьи</p>
    </div>
</div>

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

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

Это главная отличительная черта строчных элементов. Помимо этого есть важная особенность, связанная с применением свойств width и height в CSS. Для строчных элементов эти свойства не работают. Их применение не даст никакого эффекта.

Наиболее часто используемыми строчными элементами являются:

• span
• a
• Теги выделения текста i, em, b, strong

Так же, как и блочные элементы, мы можем вкладывать строчные элементы внутрь строчных. Это распространённая практика, которая вам пригодится. Например:

<span>Длинный текст, который мы обернули в строчный элемент span. Внутри span мы так же можем вставить тег <i>i</i>, <strong>strong</strong> и так далее. </span>

Важно: не вкладывайте внутрь строчных элементов блочные. Это нарушает семантику и усложняет чтение кода.

Блочная модель документа

Ещё до работы с CSS полезно понимать, как браузер выводит элементы на вашу страницу. Помимо естественных свойств высоты и ширины, любой элемент на странице может иметь следующие свойства:

• padding — Внутренние отступы элемента.
• margin — Внешние отступы от элемента.
• border — Видимые границы элемента.

Каждое из них не просто выполяет ту функцию, которая указана, но и напрямую влияет на конечные значения высоты и ширины элемента.

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

Сколько места будет занимать наш квадрат на странице? Для этого нам надо суммировать все значения.

Ширина: 150px (начальная ширина) + 2px (граница справа) + 2px (граница слева) + 10px (внутренний отступ справа) + 10px (внутренний отступ слева) + 20px (Внешний отступ справа) + 20px (Внешний отступ слева) = 214px

Высота: 150px (начальная высота) + 2px (граница сверху) + 2px (граница снизу) + 10px (внутренний отступ сверху) + 10px (внутренний отступ снизу) + 20px (Внешний отступ сверху) + 20px (Внешний отступ снизу) = 214px

Дополнительное задание

Воспользуйтесь любым онлайн сервисом, который умеет преобразовывать HTML разметку. Например, https://htmlcodeeditor.com/ .

Вставьте в левую область следующую разметку:

<div>
    <div>
        <h2>Заголовок статьи</h2>
    </div>
    <div>
        <p>А здесь находится текст статьи</p>
    </div>
</div>

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

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

Ошибки, сложный материал, вопросы >

Нашли опечатку или неточность?

Выделите текст, нажмите
ctrl + enter
и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

• задайте вопрос. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
• расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
• изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.

Об обучении на Хекслете

Основы верстки: строчные и блочные элементы

1 Ноябрь, 2013 — 20:58

Почти все теги в HTML делятся на строчные (inline) и блочные (block). Разница в этих понятиях огромная.

Для начала разберемся, чем же они все-таки такие разные. Строчными элементами называются те элементы, которые непосредственно являются частью строки. Ширина таких элементов равна ширине содержимого элемента. Строчные элементы не имеют верхних и нижних отступов. В общем потоке html документа строчные элементы идут друг под другом, если объем их содержимого не превышает ширину строки. В отличие от блочных элементов, показывая строчные браузер не ставит переноса строк не перед элементом, не после него. Внутри строчных элементов можно размещать другие строчные элементы. Применение внутренних отступов padding-top и padding-bottom влияют только на высоту области, которую занимает строчный элемент, но никак не влияют на высоту строки. Внешние отступы margin-top и margin-bottom не влияют на форматирования строчного элемента. В html существует множество строчных элементов, самые популярные из них:

<a> — гиперссылка,
<abbr> — аббревиатура,
<b> — жирный шрифт,
<br> — перевод строки,
<cite> — название, используется для художественных произведений,
<code> — код программы,
<i>  — курсивный шрифт,
<input> — элемент формы, может являться кнопкой, текстовым полем,
<label> — создаёт связь с элементом формы, элемент формы,
<select> — создает группу тегов option, с выпадающим списком,
<small> — уменьшает размер шрифта текста на одну единицу, 
<span> — строчный элемент,
<textarea> — элемент формы, многострочное поле ввода.

Блочные элементы образуют прямоугольную область, перед и после блочного элемента стоит перевод строки. Размеры блочного элемента могут изменяться атрибутами width i height. К блочным элементам применимы как внешние, так и внутренние отступы. Внутренние отступы (padding) влияют на размеры блочного элемента. Самые распространенные блочные теги html:

< html> — документ html,
<body> — тело документа,
<div> — блок,
<p> — параграф,
<h2-h6> — заголовки от самого большого, до самого малого,
< ul, ol, dl> — маркированный, нумерованный список и список определений,
<dt, dd> — дочерние элементы dl,
<address> — курсивное форматирование текста, используется для указания автора текста,
<blockquote> — используется для выделения длинных цитат,
<form> — форма html предназначенная для обмена информацией между пользователем и сервером.

Строчные элементы в CSS характеризуются значением inline атрибутa display. Для Блочных элементов значение атрибута display равно block. Благодаря этому атрибуту, строчные элементы всегда можно превратить в блочные и наоборот. Например, давайте превратим строчную ссылку в блочную и блочный div в строчный. Строчные элементы можно размещать в блочных, а блочные в строчных нельзя.

У атрибута display также есть значение none, которое используется для скрытия элемента. Он не занимает места в общем потоке html документа и не видим для пользователя. Теперь прочитав эту подробную статью, вы легко сможете делать вашу верстку валидной и красивой.

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

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

Строчные элементы — это элементы веб-страницы, которые формируют строчные блоки с характерным для них поведением.

К строчным элементам относятся элементы со значением свойства display: ‘inline’, ‘inline-table’ и ‘inline-block’.

Это:

button, textarea, input, select, img, span, a, q, code, abbr, acronym, b, basefont, bdo, big, br, cite, code, dfn, em, font, i, kbd, label, q, s, samp, select, small, strike, strong, sub, sup, tt, u, var

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

Давайте прямо сейчас рассмотрим, что это за поведение и чем оно отличается от блоков, которые формируют блочные элементы.

1) Самой главной особенностью строчных блоков является то, что при размещении их на веб-странице, они становятся частью строки, в которую они вставляются.

<p><span>Строчный элемент 1</span> <span>Строчный элемент 2</span> <span>Строчный элемент 3</span></p>

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

2) В строчные элементы запрещена вставка блочных элементов. Внутри строчных элементов могут содержаться только строчные элементы и анонимные блоки.

Следующая запись не пройдет валидацию.

<a><p>Абзац</p></a>

Необходимо написать так:

<p><a>Абзац</a></p>

3) Схлопование margin для строчных элементов не действует.

4) Свойства width и height для строчных элементов не работают.

margin-top и margin-bottom не работают.

<p>Блочный элемент</p>
<span>Строчный элемент</span>
<p>Блочный элемент</p>

Исключение элемент img, который относится к строчным элементам с замещаемым контентом. Для него все эти свойства работают.

5) Ширина строчных элементов состоит из следующих составляющих:

width = margin-left+margin-right+padding-left+padding-right + border-left + border-right + width(ширина, необходимая для того, чтобы вместить содержимое)

6) Высоту строчных элементов можно регулировать следующими свойствами:

line-height + padding-top + padding-bottom + border-top + border-bottom + height (высота необходимая, чтобы вместить содержимое)

7) Для строчных элементов можно использовать свойство vertical-align

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

Понимание принципа работы строчных элементов и их свойств может значительно сэкономить ваше время при верстке веб-страниц.

2. Строчные и блочные элементы · Неожиданный HTML

Давайте для начала научимся применять CSS-свойства к тегам. Для этого нам понадобится атрибут style. HTML и CSS должны быть разделены, но на данный момент нам нужно разобратьхотя бы несколько CSS-свойств. В дальнейшем мы научимся выносить CSS в отдельный файл

Построим блок

<div>
</div>

За счет атрибута style мы применили CSS-свойства к тегу div. width — задает ширину блока в 200 пикселей, height- высоту в 100 пикселей, background-color — делает фон красным. Все CSS-свойства отделяются друг от друга точкой с запятой.

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

Попробуйте сделать еще один прямоугольник с другими размерами и фоном самостоятельно.

Обратите внимание, что блоки каждый раз выводятся с новой строки.

Строчные и блочные элементы

Сделаем страницу с двумя блоками и двумя картинками подряд

<html>
<body>
<div>
</div>
<div>
</div>
<img src="city.jpg">
<img src="sea. jpg">

</body>
</html>

Обратим внимание на то, что получилось
Блоки отобразились каждый с новой строки, а картинки расположились в одну строчку. Почему так происходит?
Различие проистекает из того, что есть блочные и строчные элементы. Давайте разберёмся подробнее.

Тег <div> — является блочным элементом, а блочные элементы:

1. добавляют перенос до и после себя
2. если ширина не задана через свойство width, получают ширину 100%, то есть на весь экран.

Тег <span> — является строчным. Строчные располагаются в линию, что можно понять из их названия. Если места в строке нет, то они переносятся на следующую строчку.

Важный момент: у строчных элементов нет размеров. Легче всего это представить можно на примере воды. Какие размеры у литра воды? Это зависит от того, куда Вы ее нальете. Так и размеры строчных элементов ограничены внешними блоками.

Сам по себе тег <span> ничего не делает. Возникает вопрос зачем он вообще тогда нужен? Допустим, мы хотим добавить оформление к тексту. Но чтобы добавить CSS нам нужен тег. Вот тут то нам и поможет <span>

Мы можем сделать этот текст <span>красным</span>.

Давайте теперь вернемся к картинкам(теги <img>) — с одной стороны они имеют размеры, как блочные элементы, с другой они располагаются в строчку. Это происходит, потому что они являются inline-block элементами.

Свойство display

Свойство display позволяет изменить «строчность» или «блочность» элемента

display:block; //делает элемент блочным, как<div>
display:inline-block; //делает элемент строчно-блочным как <img>
display:inline;   //делает элемент строчным как <span>

Давайте попробуем поставить для одного из div’ов свойство display:inline

Если Вы все сделали правильно Ваш блок должен пропасть:) Почему? Помните — строчные блоки не имеют размеров.

Чтобы исправить ситуацию давайте поставим блокам свойство display:inline-block; При этом и картинки и блоки должны отобразиться в одну строчку, если у Вас хватает места.

Пробелы между display:inline-block; элементами

Если мы сделаем два блока (например квадраты) и поставим им свойство display:inline-block, то скорее всего между ними будет отступ

<div>
</div>
<div>
</div>

Отступ появляется из-за того, что символ переноса строки между блоками превращается в браузере в пробел. Если мы избавимся от него — то все будет отлично.

<div>
</div
><div>
</div>

Во втором примере перенос находится внутри тега и игнорируется браузером.

Принудительный перенос <br>

Для того, чтобы сделать принудительный перенос строки можно использовать тег <br>

Практика:

1. Создаем сайт на весь экран(ширину задаем в процентах, например width:70%) с двумя блоками (сайдбар — боковой блок, контент — основной блок)
2. Превращаем гиперссылку в прямоугольник(задаем ширину и высоту)
3. Создание шахматной доски 3×3
4. Навигационное меню сверху. Далее три колонки на весь экран
5. Три картинки в ряд. Между ними отступы. Шаблон занимает весь экран
6. Создаем резиновый сайт(на всю ширину экрана) с тремя блоками (см рисунок)

Особенности строчно-блочных элементов в CSS

В данном уроке мы с вами рассмотрим теги,
которые при отображении на экране являются строчно-блочных.
Строчно-блочные элементы сочетают особенности блочных
и строчных элементов.

Вы пока знаете только один такой тег: img.
Картинки, однако, не раскрывают все особенности этой модели,
поэтому работу таких элементов посмотрим на примере тегов
span, сменив им блочную модель, задав свойству display
значение inline-block.

Ширина и высота строчно-блочного элемента

Строчно-блочного элементу можно
задать ширину и высоту, подобно блочным элементам:

<span>text</span>
span {
width: 100px;
height: 100px;
border: 1px solid red;
display: inline-block;
}

:

Ширина строчно-блочного элемента

Если у строчно-блочного элемента не задана ширина,
то он его ширина сформируется содержимым,
подобно строчным элементам:

<span>text</span>
span {
height: 100px;
border: 1px solid red;
display: inline-block;
}

:

Высота строчно-блочного элемента

Если у строчно-блочного элемента не задана высота,
то его высота сформируется содержимым,
подобно строчным элементам:

<span>text</span>
span {
width: 100px;
border: 1px solid red;
display: inline-block;
}

:

Несколько строчно-блочного элементов рядом

Если расположить несколько строчно-блочного
элементов рядом, то они выстроятся в ряд,
подобно строчным элементам:

<span>text</span>
<span>text</span>
<span>text</span>
span {
width: 100px;
height: 100px;
margin-bottom: 20px;
border: 1px solid red;
display: inline-block;
}

:

Практические задачи

Даны дивы:

<div>text</div>
<div>text</div>
<div>text</div>
span {
width: 100px;
height: 100px;
border: 1px solid red;
}

Выстройте эти дивы в ряд, преобразовав
их в строчно-блочные элементы.

HTML-классов — Атрибут класса

Атрибут класса HTML
используется для указания класса для элемента HTML.

Несколько элементов HTML могут использовать один и тот же класс.

Использование атрибута класса

Атрибут класса часто используется для указания
к имени класса в таблице стилей. Он также может использоваться JavaScript для доступа и
манипулировать элементами с определенным именем класса.

В следующем примере у нас есть три элемента