, и т. д.
Строчные элементы
В отличие от блочного, строчный элемент не переносится на новую строку, а располагается на той же строке, что и предыдущий элемент. Такие элементы, как правило, находятся внутри блочных элементов и их ширина зависит лишь от содержимого и настроек CSS. Еще одно отличие строчного элемента от блочного заключается к том, что в нем может находиться только контент и другие строчные элементы. Блочные элементы в строчные вкладывать нельзя.
Примеры строчных элементов:
, , , , ![]()
и т. д.
Примечание:
в HTML5 порядок вложения тегов такой роли не играет. Элементы уже не просто делятся на блочные и строчные, а группируются по смыслу и назначению, представляя собой категории контента .
CSS-свойство display: меняем тип элемента
При помощи крайне полезного свойства display в CSS можно заставить блочный элемент выглядеть как строчный и наоборот. Чтобы блочный элемент вел себя как inline-элемент (т. е. не переводился на новую строку), для него необходимо записать правило:
Display: inline;
Если же необходимо отобразить строчный элемент как block-элемент (чтобы до и после элемента происходил перенос строки), запишите следующее:
Display: block;
Действие {display:inline} и {display:block}
Также можно сделать «гибрид» - блочный элемент с поведением, как у строчного. В этом случае всё содержимое таких блочных элементов будет отображаться, как обычно, но при этом блоки будут вести себя как строчные элементы, выстраиваясь в одной строке друг за другом и переносясь на новую строку лишь при необходимости. Схлопывание margin в таких случаях перестает действовать. Для превращения элемента в блочно-строчный запишите:
Display: inline-block;
Действие {display:inline-block}
Далее в учебнике:
свойство CSS border . Вы узнаете, как добавлять границы для элементов веб-страницы и какие настройки к ним можно применить, используя каскадные таблицы стилей.
HTML (Hypertext Markup Language
) elements historically were categorized as either "block-level" elements or "inline" elements. Inline elements are those which only occupy the space bounded by the tags defining the element, instead of breaking the flow of the content.
In this article, we"ll examine HTML inline elements and how they differ from block-level elements .
An inline element does not start on a new line and only takes up as much width as necessary.
Inline vs. block-level elements: a demonstration
This is most easily demonstrated with a simple example. First, some simple CSS that we"ll be using:
Highlight {
background-color:#ee3;
}
Inline
Let"s look at the following example which demonstrates an inline element:
The following span is an inline element;
its background has been colored to display both the beginning and end of
the inline element"s influence.
The following paragraph is a
block-level element;
its background has been colored to display both the beginning and end of
the block-level element"s influence.
The CSS (not displayed in standard reading mode) is also used:
Body {
margin: 0;
padding: 4px;
border: 1px solid #333;
}
.highlight {
background-color:#ee3;
}
Rendered using the same CSS as before, we get:
See the difference? The
Element totally changes the layout of the text, splitting it into three segments: the text before the
Then the
"s text, and finally the text following the
Changing element levels
You can change the visual presentation
of an element using the CSS display property. For example, by changing the value of display from "inline" to "block" , you can tell the browser to render the inline element in a block box rather than an inline box, and vice versa. However, doing this will not change the category
and the content model
of the element. For example, even if the display of the span element is changed to "block" , it still would not allow to nest a div element inside it.
Conceptual differences
In brief, here are the basic conceptual differences between inline and block-level elements:
Content model
Generally, inline elements may contain only data and other inline elements. You can"t put block elements inside inline elements.
Formatting
By default, inline elements do not force a new line to begin in the document flow. Block elements, on the other hand, typically cause a line break to occur (although, as usual, this can be changed using CSS).
List of "inline" elements
The following elements are inline by default (although block and inline elements are no longer defined in HTML 5, use
