с помощью какого свойства блочный элемент можно сделать строчным

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

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

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

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

Примеры блочных элементов:

и т. д.

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

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

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

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

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

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

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

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

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

Источник

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

Блочные и строчные элементы отлично дополняют друг друга при вёрстке, занимая каждый свою определённую нишу. Но возникают случаи, когда характеристик этих элементов явно недостаточно. Галерея фотографий, представленная на рис. 3.28 состоит из секций, в которые входит изображение с подписью к нему, при этом секции выстраиваются по горизонтали, занимая всю доступную ширину. При уменьшении окна браузера секции переходят на другую строку.

Рис. 3.28. Галерея фотографий

Если для формирования секций использовать тег

Характеристики этих элементов следующие.

Чтобы создать галерею, представленную на рис. 3.28 для тега

Пример 3.18. Использование display

XHTML 1.0 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx

Поскольку все фотографии имеют одинаковый размер, ширина блока задана явно и равна 150px, но высота не указывается, поэтому при длинной подписи к рисунку высота секций будет различаться (рис. 3.29).

Рис. 3.29. Разная высота секций

Рис. 3.30. Выравнивание по верхнему краю

Пример 3.19. Стиль для IE

Также строчно-блочные элементы удобно использовать для различных каталогов товаров, которые встречаются в интернет-магазинах. Обычно они выводятся с картинкой и подписью к ней. Всё это похоже на галерею, сделанную выше, поэтому остаётся только модифицировать её код, учесть выравнивание по высоте и поведение IE (пример 3.20).

Пример 3.20. Каталог товаров

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

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

Источник

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

Выделяют две основные категории HTML-элементов, которые соответствуют типам их содержимого и поведению в структуре веб-страницы — блочные и строчные элементы. С помощью блочных элементов можно создавать структуру веб-страницы, строчные элементы используются для форматирования текстовых фрагментов (за исключением элементов и ).

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

Модель визуального форматирования CSS в деталях

1. Модель визуального форматирования

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

Каждый блок в дереве представляет соответствующий элемент или псевдоэлемент, а текст (буквы, цифры, пробелы), находящийся между открывающим и закрывающим тегами, представляет содержимое текстовых узлов.

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

Положение блоков на странице определяется следующими факторами:

2. Блочные элементы и блочные контейнеры

6. Минимальная и максимальная ширина: свойства min-width и max-width

Свойства не наследуются.

7. Высота содержимого: свойство height

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

Свойство не наследуется.

8. Минимальная и максимальная высота: свойства min-height и max-height

Иногда полезно ограничить высоту элементов определенным диапазоном. Свойства min-height и max-height предлагают эту функциональность.

Свойства не наследуются.

9. Расчет высоты строки: свойства line-height и vertical-align

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

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

В элементе уровня блока, содержимое которого состоит из элементов встроенного уровня, свойство line-height определяет минимальную высоту линейных блоков внутри элемента. Минимальная высота состоит из минимальной высоты над базовой линией и минимальной глубины под ней.

Для элементов уровня строки свойство line-height указывает высоту, которая используется при расчете высоты линейного блока.

Отрицательные значения не допустимы.

Рис. 4. Контейнер строки

Свойство не наследуется.

Рис. 5. Свойство vertical-align

10. Изменение блочной модели: свойство box-sizing

Свойство не наследуется.

Источник

Блочная и строчная модель в CSS

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

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

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

В CSS создана специальная блочная модель (англ. box model), которая описывает, из чего состоит любой блок и от каких свойств зависят его размеры. В этой модели каждый блок состоит из четырёх областей:

Рис. 74 Блочная модель CSS.

Внутренняя область (content area) – может содержать текст, изображения и другие теги, расположенные внутри содержимого. По умолчанию, размер внутренней области с содержимым задается свойствами width (ширина), min-width (минимальная ширина), max-width (максимальная ширина), height (высота), min-height (минимальная высота) и max-height (максимальная высота). Далее в учебнике мы рассмотрим, как и зачем изменить, применяемую по умолчанию CSS модель, с помощью которой вычисляются ширина и высота элементов.

Внутренние отступы или поля элемента (padding area) – по сути это пустая область, которая окружает внутреннюю область (контент). Размеры внутренних отступов могут задаваться как для всех сторон элемента, так и по отдельности с различных сторон содержимого.

Область рамки или границы элемента (border area) – окружает внутренние отступы элемента (padding area). Ширина, цвет и стиль границы может задаваться как для всех сторон элемента, так и по отдельности для каждой стороны.

Внешние отступы (margin area) – добавляют пустое пространство вокруг элемента и определяют расстояние до соседних элементов. По аналогии с внутренними отступами размеры внешних отступов могут задаваться как для всех сторон элемента, так и по отдельности с различных сторон содержимого.

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

Внешние и внутренние отступы элемента

Давайте рассмотрим пример, в котором установим для первого изображения внутренние отступы, а для другого внешние отступы и посмотрим, что из этого выйдет:

Как вы можете заметить на изображении ниже, свойства padding (внутренние отступы) и margin (внешние отступы) визуально дают один и тот же эффект:

Рис. 75 Пример использования внешних и внутренних отступов в CSS.

Но в чем же разница? Давайте рассмотрим пример, в котором зададим отступы чуть больше, добавим границу и задний фон для наших изображений.

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

Рис. 76 Отличие внешних и внутренних отступов в CSS.

Для управления внутренними и внешними отступами вы можете использовать любые единицы измерения CSS. Ранее в статье учебника «Единицы измерения CSS, размер шрифта» мы уже с вами рассматривали, какие единицы измерения более предпочтительны к использованию.

В вышерассмотренных примерах мы использовали универсальные свойства, которые задают отступы для всех сторон, мы к ним еще вернемся позднее, а сейчас хотелось бы продемонстрировать Вам, что в CSS допускается задавать отступы по отдельности для каждой из сторон. Для этих целей существует по 4 (четыре) CSS свойства для внутренних и внешних отступов, их легко запомнить, так как достаточно через дефис добавить к «универсальному свойству» название необходимой стороны:

Для внутренних отступов:

Для внешних отступов:

Давайте рассмотрим пример, в котором мы зададим внешний отступ для элемента, используя при этом процентные значения:

Значит, внешний отступ от левого края каждого изображения составит:

Размер изображения высчитывается по аналогии:

Рис. 77 Указание внешних отступов в процентах в CSS.

Мы не просто так начали изучение внешних и внутренних отступов, используя универсальные свойства margin и padding. Почему универсальные? Все просто, мы можем быстро установить значения отступов для всех четырех параметров одновременно в одном объявлении, при этом значения мы можем указывать совершенно разные, главное при этом соблюдать определённый порядок. Зачастую удобнее указать все свойства в одном объявлении, чем использовать для каждой стороны по отдельности свое свойство.

Давайте рассмотрим на примере указания значений для внутренних отступов:

Обращаю Ваше внимание, что если вам необходимо задать для какой-либо стороны нулевое значение, то единицы измерения при этом указывать не нужно. Например, укажем 1em для внутреннего отступа с левой и правой стороны, а для верха и низа зададим 0 (отсутствие отступа):

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

Обращаю Ваше внимание, что допускается использовать отрицательные значения для внешних отступов (margin). Для внутренних отступов (padding) отрицательные значения использовать не допускается.

Результат нашего примера:

Рис.78 Пример указания внешних отступов для элемента.

Нюансы работы с внешними отступами в CSS

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

) один под другим и задали им наши классы.

Рис. 79 Пример указания внешних отступов (нюансы применения).

Чтобы обойти такие конфликты, можно было использовать для одного из абзацев не внешние, а внутренние отступы (CSS свойство padding).

Строчные (линейные) элементы

Мы с Вами разобрали, что все браузеры обрабатывают элементы на веб-странице подобно блочному элементу, на самом деле не все так однозначно.

В CSS существует два типа элементов:

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

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

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

Давайте рассмотрим пример:

Результат нашего примера:

Рис. 80 Пример указания внешних и внутренних отступов для строчных элементов.

Но как говорится на каждую хитрую строку найдется свой display : inline-block :

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

Результат нашего примера:

Рис. 81 Пример указания внешних и внутренних отступов для блочно-строчных элементов.

Свойство display имеет очень широкое применение, ведь благодаря ему, мы можем заставить строчные элементы вести себя как блочные, или наоборот блочные элементы сделать строчными, и даже сделать элементы резиновыми (флекс), но об этом позднее.

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

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

Забегая вперед, хочу сказать, что вы сможете свойством display со значением none при необходимости скрывать тот или иной элемент в зависимости от разрешения, или устройства пользователя (адаптивный дизайн). Кроме того, это свойство активно применяется при работе различных скриптов.

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практические задания:

Практическое задание № 20.

Подсказка: чтобы сформировать подобное меню Вам необходимо воспользоваться маркированным списком. Подробную информацию о использовании маркированных списков Вы сможете найти в предыдущей статье учебника «Работа со списками в CSS». Подумайте, что необходимо сделать, чтобы Вы смогли указать для гиперссылок внутренние отступы, и не забудьте указать, что при наведении на них цвет заднего фона меняется на orangered.

Продвинутое задание (создание горизонтального меню навигации):

Практическое задание № 21.

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

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

Источник

Элементы HTML по способу отображения на веб-странице делятся на строчные и блочные элементы.

Дефолтные стили браузера и их нормализация

Т.е., если в браузере открыть HTML документ без привязанного к нему CSS кода, то он уже будет каким-то образом оформлен. Это базовое оформление задаётся с использованием стилей браузера.

Но в разных браузерах дефолтные стили могут быть различными.

Например, одном в браузере некоторый элемент может иметь одно оформление, а в другом другое.

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

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

После подключения этого файла все элементы в HTML документе будут отображаться более согласовано и в соответствии со современными стандартами.

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

Элементы HTML обычно являются строчными или блочными. Но это разделение существовало в HTML4. В HTML5 был предложен новый подход. В этом новом подходе применение того или иного HTML элемента должно определяться на основе контента, который он должен содержать. Для этого в HTML5 были введены категории контента, и описано какой элемент и к каким категориям может относится.

Строчные элементы (inline)

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

Строчным элементам нельзя установить размеры ( width и height ), задать верхние и нижние margin отступы.

Для строчного элемента, размещенного на одной линии, можно использовать padding, margin-left и margin-right, border.

Для строчного элемента, размещенного на нескольких строках padding, margin и border обычно не используют, т.к. они в этом случае бесполезны.

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

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

Блочные элементы (block)

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

Внутри этого блочного элемента помещён строчный элемент.

Источник