CSS Basics You Must Master: Box Model, Display Property, Inline vs Block, and Making Circles!

CSS can feel tricky when you're starting out, especially when things just “don’t align right” or “spacing feels off.” But once you master the Box Model, understand display properties, and learn how to work with inline vs block elements, everything starts making sense.

Let me walk you through the most important foundational concepts — written in beginner-friendly language and backed with practical code examples.

What is the CSS Box Model?

Before applying styles to a container (an element), you need to understand how it’s structured behind the scenes.

Think of every HTML element as a box. This box has:

• Content (like text or an image)


• Padding (space around the content)


• Border (the box edge)


• Margin (space between
  this box and others)

Let’s Understand With an Example:

Take this simple heading:

<h1>Hello, world!</h1>

<p>This is a paragraph.</p>

Even without styling, you’ll see space between <h1> and <p>, thanks to the default margin.

This is because the browser treats elements like boxes with spacing already included.

Height & Width

The content area has width and height.

div {

  height: 200px;

  width: 300px;

}

In browser dev tools, this area is usually highlighted in blue.

🔲Border

The border wraps the content and padding — defining the container’s edge.

div {

  border: 2px solid black;

}

It’s a shorthand for:

border-width: 2px;

border-style: solid;

border-color: black;

Padding

Padding is the space between the content and the border.

padding: 10px;                /* all sides */

padding: 10px 20px;           /* top-bottom | left-right */

padding: 10px 20px 30px;      /* top | left-right | bottom */

padding: 10px 20px 30px 40px; /* top | right | bottom | left */

Margin

Margin is the space between elements (outer spacing).

margin: 10px;                /* all sides */

margin: 10px 20px;           /* top-bottom | left-right */

margin: 10px 20px 30px;      /* top | left-right | bottom */

margin: 10px 20px 30px 40px; /* top | right | bottom | left */

Block vs Inline Elements in CSS

Understanding how elements behave by default is key.

Inline Elements

• Occupy only the space their content needs


• Can’t be given height or width


• Margins work horizontally only


• Padding may cause overlap

Examples: span, img, button, a, input

Block Elements

• Always start from a new line


• Take full horizontal width


• Accept all styling properties like width, height, padding, margin

Examples: div, p, h1 to h6

The Display Property in CSS

This property changes how an element behaves visually.

1. display: block;

Makes an inline element act like a block element (starts on a new line).

1. display: inline;

Makes a block element behave like inline — but you lose ability to apply height, width, etc.

1. 
   display: inline-block;
   Best of both worlds.
   You retain block-like properties (height, width, margin), but it behaves inline.

Final Takeaways

Understanding the box model unlocks real control over layout.

Inline vs block behavior affects everything from alignment to spacing.

display: inline-block is your best friend when you want styling flexibility.

Making shapes like circles in CSS is simpler than you think.

If you're just starting with web development, mastering these fundamentals will set you apart when working on real-world projects, internships, or job interviews.

Let me know what you think — and if this helped you, consider sharing it with someone who’s also learning CSS!

🔗 Follow me for more beginner-friendly dev tips and real project breakdowns.