Chapter -3: CSS Box Model

CodeVigyaan is a free education platform offering programming tutorials, study materials, notes, and real project ideas for college student.

Had the experience of trying to move an image two inches to the right and having your whole layout of your website implode? Welcome to the club. You‘re experiencing your first lesson with the CSS Box Model.

What the user sees when looking at a website is just text, buttons, images, etc. But what the user‘s browser is seeing is an array of boxes. Knowing how those boxes will work is the “secret sauce” of making a website look elegant rather than a invalid PowerPoint presentation.

The Content (The Heart of the Box)

It is where (and why) we come in. This is your text, your cat picture, your “Buy Now” button. This is the actual “stuff”. In CSS, when you define width: 200px you‘re (mostly) just referring to this inner core.

Padding (The Breathing Room)

Visualise that you are wearing a shirt which is 3 sizes too small! That was what “zero padding ” did. Padding is the space in the box, inside the content area, between your content and the border.

Human Tip: If your text is squishing the sides of a color background, just add some padding to it. It makes your site feel “expensive” and much easier to read.

The Border (The Frame)

Positioned directly outside of the padding. It could be a thin gray line, bright neon pink dashes, or totally transparent. While you may not be able to see it, the browser certainly can.

Margin (Personal Space)

Margin is the space outside the box. If you want the two buttons to stop hugging each other, you have to give them a margin.

The Big Difference: Padding is in the box (and usually takes on the background color). Margin is outside (and is a totally transparent).

The “Wait, Why is my Layout Breaking?” Moment
This is where everyone except the very most persistent tries to organize their life. Default CSS math is unintuitive.

If you want your box to be 500px wide and you add 20px of padding and a 5px border—your box is 550px wide ($500 + 20 + 20 + 5 + 5$). Why can no loner get two column you TV screen.

The Fix: apply box-sizing: border-box; to everything;.

This is the instruction for the browser to, “Remember, 500px, is the WHOLE thing. Do I include the padding and borders when I specify the width.” So useful and most new phats developers use it everywhere as soon as they start coding,

Example Snippet

/* ADD THIS TO THE VERY TOP OF YOUR CSS */

{
box-sizing: border-box;
}

/* YOUR CLEANED UP SNIPPET /
 .my-box { 
width: 300px; / The TOTAL width / 
padding: 20px; / Stays INSIDE the 300px / 
border: 5px solid; / Stays INSIDE the 300px /
margin: 50px; / Space outside the box */
font-family: Arial, Helvetica, sans-serif;
}