Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Aprenda Understanding Block, Inline, and Inline-Block Elements | The CSS Box Model & Spacing Elements
CSS Fundamentals
course content

Conteúdo do Curso

CSS Fundamentals

CSS Fundamentals

1. Getting Started with CSS
What is CSS and Why is it Important?Linking CSS to an HTML DocumentMastering CSS Selectors for Styling HTML ElementsChallenge: Apply Your First CSS StylesChallenge: Style with Class SelectorsEnhancing Styles with User Action Pseudo-ClassesChallenge: Apply User Action Pseudo-ClassesChanging Text Colors in CSSOptimizing Workflow for Efficient CSS CodingChallenge: Use Variables for Better CSS Management
2. Styling Text in CSS
Mastering Text Styling in CSSText Formatting Techniques for ReadabilityChallenge: Format Text with CSSAdding Custom Fonts to a Web PageUnderstanding and Using Font PropertiesChallenge: Explore Font Properties
3. The CSS Box Model & Spacing Elements
What is the CSS Box Model?Understanding Box Sizing in CSSAdding Space with Margins and PaddingChallenge: Apply Box Sizing to ElementsUsing Structural and Functional Pseudo-ClassesChallenge: Practice Structural Pseudo-ClassesUnderstanding Block, Inline, and Inline-Block ElementsWorking with Block-Level ElementsWorking with Inline ElementsChallenge: Predict Page Layout with Different Element Types
4. Mastering Flexbox for Layouts
What is Flexbox and Why Use It?Setting the Flex Direction for LayoutsJustifying Content Horizontally in FlexboxAligning Items Vertically in FlexboxUnderstanding Flex Item PropertiesChallenge: Apply Flexbox ConceptsChallenge: Build a Layout with Flexbox
5. Adding Decorative Effects with CSS
Using Background Colors for DesignApplying Background Images to ElementsWorking with Images in CSSCreating Effects with Decorative Pseudo-ElementsAdding Shadows for Depth and StyleChallenge: Implement Decorative Effects in CSSFurther Steps

book
Understanding Block, Inline, and Inline-Block Elements

Elements in HTML can be classified as inline or block based on their behavior.

  • Inline elements stay on the same line as other elements, only taking up as much width as needed. Examples: <a>, <span>, <img>, <input>;
  • Block elements start on a new line and take up the full width of their container. Examples: <div>, <h1>–<h6>, <p>, <ul>, <li>.

Block Elements

Block elements occupy the entire width of their container and always start on a new line. They can be styled using CSS properties like width, height, margin, padding, and border. Common examples of block elements include <div>, <p>, <ul>, and <li>.

html

index.html

css

index.css

copy

Inline Elements

Inline elements stay on the same line as other elements and only occupy the width needed for their content. Unlike block elements, inline elements cannot have width, height, margin, or padding values assigned, but border can still be applied. Examples of inline elements include <a>, <span>, <img>, and <input>.

html

index.html

css

index.css

copy

Inline-block Elements

Inline-block elements do not start on a new line but combine the styling flexibility of block elements. They can be customized using CSS properties like width, height, margin, padding, and border. Examples of inline-block elements include <button>, <select>, and <textarea>.

html

index.html

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

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 3. Capítulo 7
Sentimos muito que algo saiu errado. O que aconteceu?
some-alt