From the course: CSS Layouts: From Float to Flexbox and Grid
Unlock the full course today
Join today to access over 24,800 courses taught by industry experts.
Inline and block elements - CSS Tutorial
From the course: CSS Layouts: From Float to Flexbox and Grid
Inline and block elements
- [Narrator] The normal flow is how the browser lays out HTML elements by default when no CSS has been applied. The elements are displayed in the same order in which it appears in the HTML. The majority of elements will appear stacked on top of one another, and are known as block-level elements. Some common examples are sectioning elements, such as header and aside, as well as headings, paragraphs, and lists. There are other elements that display within a horizontal line, side by side. These are referred to as inline elements, and can be included in a block element, like a link in a paragraph or on their own. Something to note, the category of block-level versus inline elements was used in the HTML specifications up to version 4.01, but in HTML5, this was replaced with a more complex set of content categories grouped by similar characteristics. The categorization of inline and block-level elements still applies in…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
(Locked)
Inline and block elements1m 53s
-
(Locked)
The box model properties3m 32s
-
(Locked)
The display property5m
-
(Locked)
The box model and layouts3m 17s
-
(Locked)
The float property3m 19s
-
(Locked)
Clearing floats5m 46s
-
(Locked)
Setting up your project3m 8s
-
(Locked)
Exercise: Build a layout with float9m 54s
-
(Locked)
Position: Relative and absolute5m 15s
-
(Locked)
Position: Fixed, sticky, and static4m 31s
-
(Locked)
-
-
-