HTML & CSS Masterclass Tutorial

Comprehensive guide to modern HTML and CSS development.

Chapter Quiz Exercises

Layout Fundamentals

Layout Fundamentals: Display property

The display property determines how an element behaves in the document flow.

Block (display: block): Takes up the full width available, forcing a line break before and after it. Elements like <div>, <h1>, and <p> are block-level by default.
Inline (display: inline): Takes up only as much width as necessary. Does not force line breaks. You cannot set width or height on inline elements! Elements like <span> and <a> are inline by default.
Inline-Block (display: inline-block): Sits inline with text, but allows you to set width, height, margin, and padding!
None (display: none): Completely removes the element from the document.

Try It Yourself

Edit the code below and click Run to see the result live.

Source Code

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: Arial; padding: 20px; }
    .box { padding: 15px; color: white; font-weight: bold; text-align: center; margin-bottom: 10px; }
    
    .block-elem { display: block; background: #e74c3c; }
    
    .inline-elem { display: inline; background: #3498db; margin: 20px; /* Notice top/bottom margin won't work properly on inline! */ }
    
    .inline-block-elem { display: inline-block; background: #2ecc71; width: 150px; height: 80px; margin: 10px; }
  </style>
</head>
<body>

<h3>Block Elements (Take full width)</h3>
  <div class="box block-elem">Block Element 1</div>
  <div class="box block-elem">Block Element 2</div>
  
  <hr>
  
  <h3>Inline Elements (Wrap tightly, ignore width/height)</h3>
  <p>Here is some text with an <div class="box inline-elem">Inline Element 1</div> and another <div class="box inline-elem">Inline Element 2</div> sitting right next to it.</p>
  
  <hr>
  
  <h3>Inline-Block Elements (Sit next to each other, but respect width/height)</h3>
  <div class="box inline-block-elem">Inline-Block 1<br>(150px width)</div>
  <div class="box inline-block-elem">Inline-Block 2<br>(150px width)</div>
  <div class="box inline-block-elem">Inline-Block 3<br>(150px width)</div>

</body>
</html>

Result

Topics

Introduction Environment Setup First Web Page Workflow & Tools Essentials Document Structure Text Content Lists & Tables Links & Navigation Images & Media Forms & Validation Reusable Components Styling Essentials Selectors & Specificity Cascade & Inheritance Typography Colors & Backgrounds Box Model Layout Fundamentals Positioning & Z-Index Flexbox CSS Grid Layout Patterns Responsive Design Responsive Components Custom Properties Calc & Functions Transitions Transforms Animations Effects & Filters Accessibility Design Systems Performance Debugging & Testing Tooling & Automation Landing Page Project Exercises Quiz

HTML & CSS Masterclass Tutorial

Course Topics

Layout Fundamentals

Layout Fundamentals: Display property

Try It Yourself

Topics