Day 4 – CSS Box Model & Display Properties

Day 4 - CSS - Box Model & Display Properties

Niotechone Marketing Team
November 19, 2025
10:30 am

Introduction

It’s Day 4 of our CSS journey! Today we are going to explore two core concepts that determine how elements are sized, spaced, and rendered in web pages: the CSS Box Model and Display Properties.

Every HTML element can be thought of as a box – and learning how boxes behave is like learning the rules of arranging furniture in a room. You will master controlling spacing around an element, adding borders, sizing, and showing/hiding the element. These concepts are vital because they are the foundation for every web layout you will develop. Understanding these concepts will not only help you get around the hassle of spacing issues, but it will also allow you to design great layering solutions with ease!

Step-by-Step Tutorial

Step 1: Setting Up Our HTML Foundation

Let’s begin with our HTML structure, which we will continue to style during this tutorial:

🌐

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Day-4 css box model practice</title>
  <link rel="stylesheet" href="Box_Model.css">
</head>
<body>

  <h1>Day-4 css box model practice</h1>

  <div class="card box-model">
    <h2>Box Model</h2>
    <div class="box">Content Area</div>
    <p>Includes: Margin → Border → Padding → Content</p>
  </div>

  <!-- More card sections will go here -->
</body>
</html>

What this code does:

Creates the base HTML5 document structure
Connects the file to our external CSS file to apply the style
Creates a main heading and our first “card” container
Sets up the structure for showcasing box model topics

Why we do this:

Getting started with semantic HTML gives us content to style
Utilizing separate CSS files allows us to keep our code organized
The card structure will provide visual containers for each topic we will learn.

Pro Tip: Use class names that describe the class like “box-model” to describe what the element is, not just what it looks like.

Step 2: Basic CSS Reset and Body Styling

Create a new file called Box_Model.css and we will start applying some basic styles:

🎨

/* Reset default margins and set up base styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.6;
  background-color: #f8f9fa;
  padding: 20px;
  color: #333;
}

h1 {
  text-align: center;
  margin-bottom: 30px;
  color: #2c3e50;
  padding: 15px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 8px;
}

What this code does:

Uses the universal selector (*) to reset all default browser margins and padding
Sets box-sizing: border-box to ensure predictability with sizing elements
Sets a clean font family with a comfortable line height
Creates a light background and provides some padding to the page
Sets a style for our main heading with a gradient background

Why we do this:

The CSS reset gives us a consistent starting point across browsers
box-sizing: border-box makes width and height calculations predictable (we will dive into that later!)
Good typography and spacing create a clearer and more professional demo

Common Mistake to Avoid: Forgetting to apply the css reset leading to inconsistent spacing in different browsers.

Step 3: Creating Reusable Card Containers

Now let’s style our card containers which will each hold the demo section:

🎨

/* Card container styling */
.card {
  background: white;
  border-radius: 10px;
  padding: 25px;
  margin: 20px 0;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-left: 5px solid #667eea;
}

.card h2 {
  color: #2c3e50;
  margin-bottom: 15px;
  border-bottom: 2px solid #ecf0f1;
  padding-bottom: 10px;
}

What this code does:

Constructs a white card container with rounded edges
Adds an imperceptible shadow effect for some depth
Contains an accent colored left border
Establishes consistent spacing and typography for card titles

Why we do this:

Cards create visual separation between concepts
Consistent styling allows a user to focus on the content
The shadow and border effects bring polish to the UI

Step 4: Demonstrating the Box Model

Let’s create our entry-level demonstration of the box model:

🎨

/* Box Model Demonstration */
.box-model .box {
  width: 200px;
  height: 100px;
  background-color: #3498db;
  color: white;
  text-align: center;
  line-height: 100px;
  
  /* Padding - space inside the border */
  padding: 20px;
  
  /* Border - the visible edge */
  border: 5px solid #2980b9;
  
  /* Margin - space outside the border */
  margin: 30px auto;
}

.box-model p {
  text-align: center;
  font-weight: bold;
  color: #7f8c8d;
  margin-top: 10px;
}

What this code does:

Creates a blue box of a fixed and defined width and height
Has defined padding inside the border (space between the content of the box and the border)
Has a defined and visible border surrounding the element
Is given margin property in order to create a distance from the border
Centers whatever text is in the box (and the box itself)

Why we do this:

This visually demonstrates all four components of the box model
Illustrates how the padding, border and margin will affect total space allotments
The box’s margin: auto value causes the box to center horizontally

Pro Tip: For a block element that has a defined width, it is easy to horizontally center the block in a larger container using margin: 0 auto.

Step 5: Understanding Width, Height, and Box-Sizing

Now let’s look at sizing an element. the primary size property, and more importantly, the box-sizing property:

🎨

/* Width & Height Examples */
.fixed-box {
  width: 150px;
  height: 80px;
  background-color: #e74c3c;
  color: white;
  text-align: center;
  line-height: 80px;
  border: 3px solid #c0392b;
  margin: 15px 0;
}

/* Box-Sizing Demonstration */
.box-sizing-demo {
  width: 200px;
  height: 100px;
  background-color: #27ae60;
  color: white;
  text-align: center;
  line-height: 100px;
  padding: 20px;
  border: 5px solid #219653;
  
  /* The magic property! */
  box-sizing: border-box;
  
  margin: 15px 0;
}

What this code does:

Creates a fixed-sized red box demonstrating basic width and height
Creates a fixed-sized green box with the same width and height the properties of that box utilize box-sizing: border-box
Both boxes have defined padding and borders. However, the two boxes behave differently.

Why we do this:

To visually show the difference between the default box-sizing property of content-box, and using border-box as an easy sizing preference.
Illustrate why box-sizing border-box is a preferred method of sizing our elements (more predictable size allotments)
Shows the effect of the padding and the border with each element sizing.

Common mistake to avoid: Failing to apply box-sizing: border-box will result in unexpected element dimensions when padding or borders are assigned.

Step 6: Exploring Display Properties

Let’s look at how each display type affects how an element behaves:

🎨

/* Display Types Demonstration */
.display-types span {
  display: block;
  margin: 8px 0;
  padding: 10px;
  background-color: #f39c12;
  color: white;
  text-align: center;
}

.display-types .inline {
  display: inline;
  background-color: #8e44ad;
}

.display-types .inline-block {
  display: inline-block;
  background-color: #16a085;
  width: 120px;
}

.display-types .none {
  display: none;
  background-color: #95a5a6;
}

What this code does:

Displays four different types of display applied to span elements
Demonstrates block, inline, inline-block, and none display values, respectively
Displays how each display type interacts with rendering behavior and styling capabilities

Why we do this:

Understanding how display works is essential for controlling layouts
Demonstrates when to choose each display type for specific use-cases
Demonstrates an explanation of why some elements can have a width or height applied while others cannot

Step 7: Working with Visibility and Overflow

Lastly, let’s take a look at visibility and content overflow management:

🎨

/* Visibility Examples */
.visible {
  visibility: visible;
  background-color: #d4edda;
  padding: 10px;
  margin: 10px 0;
  border: 1px solid #c3e6cb;
}

.hidden {
  visibility: hidden;
  background-color: #f8d7da;
  padding: 10px;
  margin: 10px 0;
  border: 1px solid #f1b0b7;
}

/* Overflow Demonstration */
.overflow-box {
  width: 300px;
  height: 150px;
  border: 2px solid #bdc3c7;
  padding: 15px;
  margin: 15px 0;
  
  /* Overflow handling */
  overflow: auto;
  background-color: #ecf0f1;
}

.sticky {
  position: sticky;
  top: 0;
  background-color: #34495e;
  color: white;
  padding: 10px;
  margin: -15px -15px 15px -15px;
  text-align: center;
}

What this code does:

Displays the difference between a visibility of visible and hidden
Displays a scrollable container using overflow: auto
Displays sticky positioning inside of the overflow container
Displays style management of content when it doesn’t fit in its container

Why we do this:

Understanding the difference between visibility vs. display: none is important for working with animations and layouts
Managing overflow is essential for responsive design
Sticky-positioning is helpful for keeping an element in view during a scroll

Code Explanation Sections

The Complete Box Model Breakdown

Next, we want to explore the entire concept of the box model with a thorough example:

🎨

.box-model-detail {
  /* Content dimensions */
  width: 300px;
  height: 150px;
  
  /* Padding - inside space */
  padding: 25px;
  
  /* Border - visible boundary */
  border: 10px solid #3498db;
  
  /* Margin - outside space */
  margin: 40px;
  
  /* Background and text */
  background-color: #ecf0f1;
  text-align: center;
  line-height: 150px;
}

How it works:

Content: The content area is the actual content area (text, pictures, etc.)
Padding: Padding is the empty space surrounding the content area, yet still on the content side of the border.
Border: The border is the line we can see bounding both the padding and content space.
Margin: Margin is the space outside the border, pushing it away from other elements.

Total element width calculation:

With the box-sizing value set to content-box (which is the default): Total Width = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right

With the box-sizing value set to border-box: Total Width = width (which includes content + padding + border) + margin

Why this matters: Knowing how to calculate these dimensions does prevent layouts from doing unexpected things and, more importantly, will open the door to more precise designs.

Display Types Deep Dive

Next, we will look at the most common display values and when you typically want to use them:

🎨

.display-comparison {
  margin: 20px 0;
}

.block-element {
  display: block;
  width: 100%;
  background: #e74c3c;
  padding: 10px;
  margin: 5px 0;
}

.inline-element {
  display: inline;
  background: #3498db;
  padding: 5px;
  /* width and height don't work on inline elements! */
}

.inline-block-element {
  display: inline-block;
  background: #27ae60;
  padding: 10px;
  width: 120px; /* This works! */
  margin: 5px;
}

How they work:

Block: Block elements will take the complete width available and a block element will always start on a new line. Examples of block elements are <div> and <p>.
Inline: Inline elements will flow with text, taking up only the space needed. Examples of inline elements are <span> and <a> .
Inline-block: Inline-block will flow inline like inline elements, yet it allows width and height like block elements.
None: Elements set to ‘none’ will be completely removed from a layout as if the element does not exist.

Why choose each:

You will want to use blocks to create your major sections of the layout.
You will want to use inline for elements that are at the text level.
You will want to use inline-block to create buttons, icons or any inline elements that you want to control the width and height of.

Tables of Key Concepts

1. Components / Keywords Used

Name	Description
box-sizing	Controls how element width and height are calculated
display	Defines how an element is displayed in the layout
visibility	Controls whether an element is visible or hidden
overflow	Manages content that overflows its container
margin	Space outside the element’s border
padding	Space inside the element’s border, around content
border	Visible boundary around padding and content
width/height	Sets dimensions of the content area
block	Display type: element takes full width, starts on new line
inline	Display type: flows with text, only takes needed space
inline-block	Display type: inline flow but accepts block properties

2. Key Properties / Parameters / Features

Name	Description
content-box	Default box-sizing: width/height only apply to content
border-box	Box-sizing: width/height include content, padding, border
visible	Default visibility: element is visible
hidden	Visibility: element is hidden but still takes space
auto	Overflow: adds scrollbars only when needed
scroll	Overflow: always shows scrollbars
hidden	Overflow: clips overflowing content
sticky	Position: sticks to viewport when scrolling
auto margin	Centers block elements horizontally when width is set

Useful References

Source Code:

https://github.com/niotechoneSoftware/dotnet-developer-roadmap/tree/main/CSS-Fundamentals/Day%204%20-%20CSS%20-%20Box%20Model%20%26%20Display%20Properties

Summary – What You Learned

You have learned how to:

Use the CSS Box Model (content, padding, border, margin)
Control spacing with padding and margin
Style elements using borders
Understand block, inline, inline-block display types
Structure clean layouts using box model + display properties

Mastering these basics helps you build neat, consistent, and professional web layouts. Keep practicing different spacing and display combinations to improve your designs!

Output

Let's Work Together

Software Development Services

+91 9925 66 8383

Related Tags

Frequently Asked Questions FAQs

What is the CSS Box Model and why is it important?

The CSS Box Model defines how every element on a webpage is structured—content, padding, border, and margin. It is crucial for controlling spacing and layout accurately.

What is the difference between block, inline, and inline-block elements?

Block elements take full width and start on a new line, inline elements stay within text flow, and inline-block elements allow width/height control while staying inline.

How does box-sizing affect layout?

box-sizing: border-box; includes padding and border inside the set width/height, making layouts easier and preventing unexpected element expansion.

How do margin collapsing issues occur in CSS?

Margins of two vertical block elements can merge into a single margin. This happens when no padding, border, or content separates them.

When should I use display: flex vs display: block?

Use flex when you need dynamic alignment, spacing, and responsive layouts. Use block for simple, full-width elements without complex alignment needs.

Our Story

Company

Services

Trusted By

Trusted By

Expertise

Trusted By

Trusted By

Let's Discuss - Requirements

Let's Discuss - Requirements

Let's Discuss - Requirements

Technologies

Let’s Discuss – Requirements

Let’s Discuss – Requirements

Let’s Discuss – Requirements

Day 4 - CSS - Box Model & Display Properties

Table of Contents

Introduction

Step-by-Step Tutorial

Step 1: Setting Up Our HTML Foundation

Step 2: Basic CSS Reset and Body Styling

Step 3: Creating Reusable Card Containers

Step 4: Demonstrating the Box Model

Step 5: Understanding Width, Height, and Box-Sizing

Step 6: Exploring Display Properties

Step 7: Working with Visibility and Overflow

Code Explanation Sections

Tables of Key Concepts

Useful References

Source Code:

Summary – What You Learned

Output

Categories

Related Articles

Legacy Modernization with .NET Core

.NET Fusion: Humans & AI Build Together

JavaScript Day 7: Events, Strings & String Methods

Follow Us

Let's Work Together

Related Tags

Frequently Asked Questions FAQs

Services

Our Expertise

Hire Developers

Technologies

Contact For Sales

Contact For Careers

India

Canada