Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Element Types | Box Model and Element Spacing
CSS Fundamentals
course content

Course Content

CSS Fundamentals

CSS Fundamentals

1. Introduction to CSS
2. Text Styles
3. Box Model and Element Spacing
4. Flexbox
5. Decorative Effects

bookElement Types

Elements can be classified as inline or block elements, and the distinction lies in their default behavior.

  • Inline elements typically do not start on a new line and only take up as much width as necessary. They allow other elements to sit beside them on the same line;
  • Block elements, on the other hand, typically start on a new line and extend the full width of their container. They create a new "block" or "box" for content.

Block elements

Block elements occupy the entire width of their parent container and typically begin on a new line. Examples of block elements encompass <div>, <h1> through <h6>, <p>, <ul>, <ol>, <li>, and various others. These elements can have their width, height, margin, padding, and border properties customized using CSS.

html

index

css

index

js

index

copy

Inline elements

Inline elements do not initiate a new line and only occupy the width essential for their content. Examples of inline elements encompass <a>, <span>, <img>, <input>, and several others. Unlike block elements, inline elements cannot be assigned specific values for height, width, margin, or padding using CSS. However, it's worth noting that border can be applied to inline elements.

html

index

css

index

js

index

copy

Inline-block elements

In addition to block and inline elements, there exists a third category known as inline-block elements. Similar to inline elements, inline-block elements do not initiate a new line and occupy just enough width for their content. What sets them apart is their ability to have height, width, margin, padding, and border properties specified using CSS. Examples of inline-block elements include <button>, <select>, and <textarea>.

html

index

css

index

js

index

copy
1. What is the main difference between block and inline elements?
2. Which of the following is an example of a block element?
What is the main difference between block and inline elements?

What is the main difference between block and inline elements?

Select the correct answer

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

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

Select the correct answer

Everything was clear?

How can we improve it?

Thanks for your feedback!

Section 3. Chapter 7
We're sorry to hear that something went wrong. What happened?
some-alt