Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Lære Understanding Block, Inline, and Inline-Block Elements | Section
Learn
Kurser
Learning Tracks
Popular Topics
Practice
Projects
Quizzes & Challenges
Quizzes
Challenges
/
CSS Fundamentals for React Developers - 1768407374224

bookUnderstanding Block, Inline, and Inline-Block Elements

HTML elements behave differently depending on whether they are block, inline, or inline-block. These display types affect layout, spacing, and what CSS properties you can use.

Block Elements

  • Start on a new line;
  • Take up the full width of their container;
  • Support width, height, margin, padding, and border.

Common examples: <div>, <p>, <ul>, <li>, <h1>–<h6>.

index.html

index.html

index.css

index.css

copy

Inline Elements

  • Stay on the same line;
  • Take only the space needed for their content;
  • Cannot have width or height applied (but border works).

Common examples: <a>, <span>, <img>, <input>.

index.html

index.html

index.css

index.css

copy

Inline-block Elements

  • Stay inline, like text;
  • Support width, height, margin, padding, and border, like block elements.

Examples: <button>, <select>, <textarea>.

They are useful when you need elements to sit side by side, but still allow full styling control.

index.html

index.html

index.css

index.css

copy

1. What is the main difference between block and inline elements?

2. Which of the following is an example of a block element?

question mark

What is the main difference between block and inline elements?

Select the correct answer

question mark

Which of the following is an example of a block element?

Select the correct answer

Var alt klart?

Hvordan kan vi forbedre det?

Tak for dine kommentarer!

Sektion 1. Kapitel 23

Spørg AI

expand

Spørg AI

ChatGPT

Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat

bookUnderstanding Block, Inline, and Inline-Block Elements

Stryg for at vise menuen

HTML elements behave differently depending on whether they are block, inline, or inline-block. These display types affect layout, spacing, and what CSS properties you can use.

Block Elements

  • Start on a new line;
  • Take up the full width of their container;
  • Support width, height, margin, padding, and border.

Common examples: <div>, <p>, <ul>, <li>, <h1>–<h6>.

index.html

index.html

index.css

index.css

copy

Inline Elements

  • Stay on the same line;
  • Take only the space needed for their content;
  • Cannot have width or height applied (but border works).

Common examples: <a>, <span>, <img>, <input>.

index.html

index.html

index.css

index.css

copy

Inline-block Elements

  • Stay inline, like text;
  • Support width, height, margin, padding, and border, like block elements.

Examples: <button>, <select>, <textarea>.

They are useful when you need elements to sit side by side, but still allow full styling control.

index.html

index.html

index.css

index.css

copy

1. What is the main difference between block and inline elements?

2. Which of the following is an example of a block element?

question mark

What is the main difference between block and inline elements?

Select the correct answer

question mark

Which of the following is an example of a block element?

Select the correct answer

Var alt klart?

Hvordan kan vi forbedre det?

Tak for dine kommentarer!

Sektion 1. Kapitel 23
some-alt