CSSmarkup~30 mins

Block vs inline vs inline-block in CSS - Hands-On Comparison

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Understanding Block, Inline, and Inline-Block Elements with CSS

📖 Scenario: You are creating a simple webpage to learn how different CSS display properties affect the layout of elements. You want to see how block, inline, and inline-block elements behave visually.

🎯 Goal: Build a webpage with three colored boxes labeled 'Block', 'Inline', and 'Inline-Block'. Each box uses the corresponding CSS display property so you can observe how they appear and flow on the page.

📋 What You'll Learn

Create three <div> elements with text 'Block', 'Inline', and 'Inline-Block'.

Add CSS rules to set the display property of each div to block, inline, and inline-block respectively.

Give each box a distinct background color and fixed width and height so differences are visible.

Ensure the page uses semantic HTML5 structure and is responsive.

Include accessible labels and good color contrast.

💡 Why This Matters

🌍 Real World

Understanding how block, inline, and inline-block elements behave helps you build layouts that look good and work well on all devices.

💼 Career

Web developers must control element layout precisely. Knowing display types is essential for creating accessible and responsive websites.

Progress0 / 4 steps

Create the HTML structure with three <div> elements

Create a basic HTML5 page with a <main> section containing three <div> elements. Each div should have the exact text: Block, Inline, and Inline-Block respectively.

CSS




    
    
    Display Types

Need a hint?

Remember to put the three <div> elements inside the <main> tag with the exact text content.

Add CSS styles for colors and sizes

Inside a <style> tag in the <head>, add CSS rules to style all three div elements with a width of 8rem, height of 4rem, white text color, and distinct background colors: blue for the first, green for the second, and orange for the third.

CSS




    
    
    Display Types
    
        /* Style all divs with width, height, white text, and background colors */
    


    
        Block
        Inline
        Inline-Block

Need a hint?

Use the div:nth-child() selector to assign different background colors to each box.

Set the display property for each box

Add CSS rules to set the display property of the first div to block, the second div to inline, and the third div to inline-block. Use the div:nth-child() selectors to target each one.

CSS




    
    
    Display Types
    
        div {
            width: 8rem;
            height: 4rem;
            color: white;
        }
        div:nth-child(1) {
            background-color: blue;
            /* Set display to block */
        }
        div:nth-child(2) {
            background-color: green;
            /* Set display to inline */
        }
        div:nth-child(3) {
            background-color: orange;
            /* Set display to inline-block */
        }
    


    
        Block
        Inline
        Inline-Block

Need a hint?

Use display: block;, display: inline;, and display: inline-block; for the first, second, and third div respectively.

Add spacing and semantic improvements

Add CSS to give each div a margin of 0.5rem to separate them visually. Also, add an aria-label attribute to each div with the exact values: Block box, Inline box, and Inline-Block box respectively for accessibility.

CSS




    
    
    Display Types
    
        div {
            width: 8rem;
            height: 4rem;
            color: white;
            /* Add margin here */
        }
        div:nth-child(1) {
            background-color: blue;
            display: block;
        }
        div:nth-child(2) {
            background-color: green;
            display: inline;
        }
        div:nth-child(3) {
            background-color: orange;
            display: inline-block;
        }
    


    
        
        Block
        Inline
        Inline-Block

Need a hint?

Use the margin property to add space around each box. Add the aria-label attribute inside each div tag for accessibility.