From the course: CSS Essential Training

Unlock the full course today

Join today to access over 23,200 courses taught by industry experts.

Inline, block, and display

Inline, block, and display - CSS Tutorial

From the course: CSS Essential Training

Start my 1-month free trial Buy for my team

Inline, block, and display

“

- As we've been building out our projects and doing CodePen examples, you may have noticed that HTML elements are arranged in certain ways. For example, why do links line up side by side while headings and paragraphs stack on top of each other? That's because every HTML element falls into two categories, block or inline, which determine how they occupy space on the page. Block elements are the same height as the content contained between their tags, but they span the entire width of their containing element even if the content itself does not. This is why block elements always start on a new line. Most elements are block elements. Some commonly used ones are paragraphs, headings and sectioning elements like article and section. Inline elements are the same size as their content. They're also displayed in a line, side by side starting from the left. The elements will wrap to the next line only if the content can't fit on the…

Contents