css box model assignment

CSS Box Model Properties – Explained With Examples ✨

Today we're gonna learn how to use the CSS box model with examples. This will help you make pixel perfect websites and will teach you to use the box-sizing, margin, padding, and border properties more accurately.

We're also going to see some practical use cases for these properties. Let's get started 💖

Table of Contents

Why learn css box model, css box-model diagram, the padding property, the border property.

• The Margin  Property
• The box-sizing Property.
• Content-box VS Border-box

You can watch this tutorial on YouTube as well if you like:

The CSS box model comprises the box-sizing, padding and margin properties. If you don't use them, your website will look like this 👇

But if you use the box model properties correctly, your website will look like this 👇

Much more visually appealing, right? If you want to make your website with accurate calculations, like the one above 👆 then this topic is for you. Learning about the CSS box model is one of many ways that will help you make pixel perfect websites.

This article will talk about how to use these properties:

How to Use CSS box-model Properties

Let's look at some examples of where we can use the properties of the CSS box-model. We're gonna dissect the website shown above. 👆

Let's have a closer look at the navbar . You can notice the difference between the example that uses the padding property and the one that doesn't:

Now let's have a closer look to the content section along with the buttons . Again, you'll notice the difference – the right one is also using the padding property.

Think of the CSS box-model like an onion . It has 4 Layers :

• 1st layer: Content
• 2nd layer: Padding
• 3rd layer: Border
• 4th layer: Margin

1st box-model layer: Content

In HTML, everything behaves like a box . Let's insert some content with a kitty image. 👇

2nd box-model layer: Padding

The next layer of the CSS box model is the padding layer. It wraps our content like this 👇

3rd box-model layer: Border

The next layer of the CSS box model is the border layer. It wraps our content + padding like this 👇

4th box-model layer: Margin

The next and final layer of the CSS box model is the margin layer. It wraps our content + padding + border like this 👇

Alright, let's see how these properties work in a project.

How to Setup the Project

This tutorial is good for everyone including beginners. If you want to code along, then follow these steps.

Open VS Code or Codepen.io and write this code 👇 inside the body tag:

Clear the default styles of our browser 👇

Now, let's style our box 👇

We're all set, let's start coding! ✨

But first, let's discuss the practical uses of the padding property. Then, we'll see how to use this property.

Generally, I use padding to put some space between contents. Look at this navbar 👇

Here's another example for you – look at the below content, with two buttons👇

How to use the padding property in CSS

This is the shorthand of the four padding properties:

• padding-top
• padding-right
• padding-bottom
• padding-left

And remember, padding is the space you add on top of your main content :

Let's add some padding to our content. The red colored area is the padding 👇

In order to recreate the results above, ☝ write this code in your CSS: 👇

Let's open our developer console and go to the computed section :

At the very middle is our content which is 300px in width. Look around our content, we have added 100px padding all around it.

Let's try adding padding to just 1 side of our content (only the right side):

Now, open the computed section on your developer console 👇

Look – the padding of 100px has only been added on the right side of our content as we specified.

You'll commonly use the border property while making buttons . Here's a GIF demo 👇

Notice how a white colored border shows around the button when I hover the mouse over the button.

How to use the border property in CSS

And remember, the border is the space added on top of our main content + padding : 👇

There are three crucial inputs of the border property:

• border size
• border style : solid / dotted/ dashed
• border color

There are three styles of border property as I listed above. In this example, we'll use the dashed style:

To recreate the results above, write this code in your CSS: 👇

Let's open our console and see the box model calculations:

Now look at the above image☝ – a 10px border is added all around our content + padding .

The Margin Property

Generally, I use the margin property to put some whitespace between my content and the main screen on the desktop layout (large screens). Look at this GIF: 👇

Notice that I'm adding the margin to the left and right edges of my website above 👆

Here's another sample GIF of a use case of the margin property: 👇

How to use margin property in CSS

This is the shorthand for the four properties of the margin property:

• margin-right
• margin-bottom
• margin-left

And remember, margin is the space added on top of our main content + padding + border :

Let's add a margin to our content. The content is getting pushed due to the Margin in this GIF: 👇

We can check the calculations again: 👇

Look, a 50px margin has been added all around our content + padding + border .

Let's try adding a margin to just 1 side of our content (only the left side):

To recreate the results above, write this code in your CSS 👇

On the console, we can see that a 50px margin got applied only on the left side 👇

Take a Break!

So far so good – take a break! You deserve it 💖

The Box-sizing Property

This property defines how our margin, padding, and borders will be calculated. There are three types of calculations (you can call them values):

• padding-box
• content box

We're not gonna discus box-sizing: padding-box, as only Firefox supports it and it isn't used very often.

What is the difference between content-box and border-box in CSS?

Both border-box and content-box work in the same way. Look at these images:👇

So, what's the main difference here? The difference is noticeable when we are adding margin, border, or padding to our boxes.

When we are using the box-sizing: content-box , which is the default value, it will add a margin, padding, and borders outside the box , like this: 👇

You can see the calculations here as well: 👇

Which means that things can get out of control and you'll see unexpected calculations. This means that it's hard to make responsive websites. Always use the box-sizing: border-box property instead.

But when we are using the box-sizing: border-box property, it will add a margin, padding, and borders inside the box , like this:👇

The box-sizing: border-box property shows us the EXACT calculations of our HTML elements, which means that this value is ideal for making responsive websites.

You can experiment with the values as well – just follow along with this code: 👇

Congratulations! You can now make pixel perfect websites. Not only that, but when you're coding, you can figure out why your content is behaving strangely.

Here's your medal for reading till the end ❤️

Suggestions & Criticisms Are Highly Appreciated ❤️

YouTube / Joy Shaheb

LinkedIn / JoyShaheb

Twitter / JoyShaheb

Instagram / JoyShaheb

• Images from Freepik

Joy is an experienced Senior Frontend Developer and a mentor based in Dhaka, Bangladesh. He is highly enthusiastic about javascript & He is on a mission to create the best web dev tutorials online

If you read this far, thank the author to show them you care. Say Thanks

Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started

The Box Model

Foundations course, introduction.

Now that you understand the basic syntax of HTML and CSS, we’re going to get serious. The most important skills you need to master with CSS are positioning and layout . Changing fonts and colors is a crucial skill, but being able to put things exactly where you want them on a webpage is even more crucial. After all, how many webpages can you find where absolutely every element is just stacked one on top of another?

Learning to position elements on a webpage is not that difficult once you understand just a few key concepts. Unfortunately, many learners race through learning HTML and CSS to get to JavaScript and end up missing these fundamental concepts. This leads to frustration, pain, ( and funny gifs ) because all the JavaScript skills in the world are meaningless if you can’t stick your elements on the page where you need them to be. So with that in mind, let’s get started.

Lesson overview

This section contains a general overview of topics that you will learn in this lesson.

• You’ll learn all about the box model .
• You’ll learn how to make sure elements are just the right size with margin , padding , and borders .

The box model

The first important concept that you need to understand to be successful in CSS is the box model. It isn’t complicated, but skipping over it now would cause you much frustration down the line.

Every single thing on a webpage is a rectangular box. These boxes can have other boxes in them and can sit alongside one another. You can get a rough idea of how this works by applying an outline to every element on the page like this:

You can use the browser’s inspector to add the CSS above to this web page if you want. Boxes in boxes!

OK, so there might be some circles in the above image… but when it comes to layout, they fit together like rectangular boxes and not circles. In the end, laying out a webpage and positioning all its elements is deciding how you are going to nest and stack these boxes.

The only real complication here is that there are many ways to manipulate the size of these boxes, and the space between them, using padding , margin , and border . The assigned articles go into more depth on this concept, but to sum it up briefly:

• padding increases the space between the border of a box and the content of the box.
• margin increases the space between the borders of a box and the borders of adjacent boxes.
• border adds space (even if it’s only a pixel or two) between the margin and the padding.

Be sure to study the diagrams carefully.

• Learn CSS Box Model In 8 Minutes is a straightforward overview of the box model, padding and margin. Go ahead and watch this now; it informs everything else.
• box-sizing: border-box (EASY!) is an add-on to the above resource with a better explanation of ‘box-sizing’.
• Because the box model concept is so incredibly fundamental, let’s dig a bit deeper with MDN’s lesson on the box model . It covers the same material as the video(s) above and will introduce you to inline boxes that we will explore in the next lesson. Pay close attention to the examples and take the time to experiment with their in-browser editor!
• The CSS Tricks page on margins has some further information about the margin property that you’ll find useful. Specifically, the sections about auto and margin collapsing contain things you’ll want to know.

Knowledge check

The following questions are an opportunity to reflect on key topics in this lesson. If you can’t answer a question, click on it to review the material, but keep in mind you are not expected to memorize or master this knowledge.

• From inside to outside, what is the order of box-model properties?
• What does the box-sizing CSS property do?
• What is the difference between the standard and alternative box model?
• Would you use margin or padding to create more space between 2 elements?
• Would you use margin or padding to create more space between the contents of an element and its border?
• Would you use margin or padding if you wanted two elements to overlap each other?
• How do you set the alternative box model for all of your elements?
• How do you center an element horizontally?

Additional resources

This section contains helpful links to related content. It isn’t required, so consider it supplemental.

• For a more interactive explanation and example, try this Scrim on the box model .
• This informative video tutorial by Slaying The Dragon offers a valuable resource for understanding the box model.

Support us!

The odin project is funded by the community. join us in empowering learners around the globe by supporting the odin project.

• CSS Tutorial
• CSS Exercises
• CSS Interview Questions
• CSS Selectors
• CSS Properties
• CSS Functions
• CSS Examples
• CSS Cheat Sheet
• CSS Templates
• CSS Frameworks
• CSS Formatter
• CSS Introduction
• CSS Comments
• CSS Borders
• CSS Margins
• CSS Height and Width
• CSS Outline
• CSS Display property
• CSS max-width Property
• CSS Positioning Elements
• CSS z-index Property
• CSS Overflow
• CSS Combinators
• CSS Pseudo-classes
• CSS Pseudo Elements
• CSS Opacity / Transparency
• CSS DropDowns
• CSS Image Gallery
• CSS Image Sprites
• CSS Attribute Selector
• CSS Counters
• CSS Website Layout
• CSS Specificity
• How to apply !important in CSS?
• CSS Text Formatting
• CSS text-align-last Property
• CSS text-decoration Property
• CSS text-decoration-color Property
• CSS text-decoration-line Property
• CSS text-decoration-style Property
• CSS text-indent Property
• CSS text-justify Property
• CSS text-overflow Property
• CSS text-transform Property
• CSS text-shadow Property
• CSS letter-spacing Property
• CSS line-height Property
• CSS direction Property
• CSS word-spacing Property

CSS Backgrounds

• CSS Background
• CSS background-color Property
• CSS background-image Property
• CSS background-attachment Property
• CSS background-position Property
• CSS background-origin property
• CSS background-clip Property
• CSS list-style-type Property
• CSS list-style-image Property
• CSS list-style-position Property
• CSS list-style Property

CSS Box model

• CSS border Property
• Difference between relative , absolute and fixed position in CSS
• CSS bottom Property

CSS flexbox

• Introduction to CSS Flexbox
• CSS Flexbox and Its Properties
• CSS flex Property
• CSS flex-grow Property
• CSS flex-shrink Property
• CSS flex-basis Property
• CSS flex-wrap property

CSS Grid Layout

• CSS Grid Layout Module
• CSS column-gap Property
• CSS gap Property
• CSS grid Property
• CSS grid-area Property
• CSS grid-auto-columns Property
• CSS grid-auto-flow Property
• CSS grid-auto-rows Property
• CSS grid-column Property
• CSS grid-column-end Property
• CSS grid-column-gap Property
• CSS grid-column-start Property
• CSS grid-gap Property
• CSS grid-row Property
• CSS grid-row-end Property
• CSS grid-row-gap Property
• CSS grid-row-start Property
• CSS grid-template Property
• CSS grid-template-areas Property
• CSS grid-template-columns Property
• CSS grid-template-rows Property

Responsive Web Design

• Basics of Responsive Web Design - Media Queries
• Short note on Responsive Web Design
• Features of Responsive Web Design
• CSS Media Queries
• CSS Transitions
• Transition shorthand with multiple properties in CSS?
• CSS transition Property
• CSS transition-duration Property
• CSS transition-timing-function Property
• CSS transition-delay Property
• CSS Animations
• CSS animation-name Property
• CSS animation-duration Property
• CSS animation-timing-function Property
• CSS animation-delay Property
• CSS animation-iteration-count Property
• CSS animation-direction Property
• CSS animation-fill-mode Property
• CSS animation-play-state Property
• CSS Exercises, Practice Questions and Solutions

CSS Box Model  is a Fundamental concept in CSS that governs how elements are structured and positioned on a webpage. By learning this model, you’ll create elements visually appealing that adjust seamlessly to various screen sizes. It is used to create the design and layout of web pages.

In this article, we’ll learn the key components of the box model and its practical implications.

What is the CSS Box Model?

The box model in CSS is a container that contains various properties, including borders , margins , padding , and the content itself . These properties collectively determine the dimensions and spacing of an element.

Let’s break down the key components:

• Content : The actual data in text, images, or other media forms can be sized using the width and height property.
• Padding : Padding is used to create space around the element, inside any defined border.
• Border : The border is used to cover the content & any padding, & also allows setting the style, color, and width of the border.
• Margin : Margin is used to create space around the element ie., around the border area.

1. Content Area

• Contains the actual data, such as text, images, or other media.
• Sized using the width and height properties.
• Bounded by the content edge.

2. Padding Area

• Surrounds the content area.
• Space within the border box.
• Dimensions are determined by the width and height of the padding box.

3. Border Area

• Lies between the padding and margin.
• Width and height are defined by the border.

4. Margin Area

• Separates the element from neighboring elements.
• Dimensions specified by the margin-box width and height.

The following figure illustrates the Box model in CSS.

How Does the Box Model Work?

When setting the width and height properties for an element, we’re mainly adjusting the content area . However, to calculate the full size of the element, we need to consider padding , borders , and margins .

While setting the width and height properties of an element with CSS, we have only set the width and height of the content area. We need to add padding, borders, and margins in order to calculate the full size of an element. Consider the below example.

Total Width Calculation

Total element width = width + left padding + right padding + left border + right border + left margin + right margin

• Total width of the element is 94px.
• Total width = 80px (width) + 10px (left padding + right padding) + 4px (left border + right border) + 0px (left margin + right margin) = 94px.

Total Height Calculation

Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin

• Total height of the element is 84px.
• Total height = 70px (height) + 10px (top padding + bottom padding) + 4px (top border + bottom border) + 0px (top margin + bottom margin) = 84px.

Examples of Box models in CSS

Now, We have learned the working of the CSS Box Model in-depth and now we will see Box Model examples so that we can properly understand it.

This example illustrates the use of the CSS Box model for aligning & displaying it properly.

This example illustrates the Box Model by implementing the various properties.

Please Login to comment...

Similar reads.

• Web Technologies
• What are Tiktok AI Avatars?
• Poe Introduces A Price-per-message Revenue Model For AI Bot Creators
• Truecaller For Web Now Available For Android Users In India
• Google Introduces New AI-powered Vids App
• 30 OOPs Interview Questions and Answers (2024)

Improve your Coding Skills with Practice

What kind of Experience do you want to share?

Learn Python practically and Get Certified .

Popular Tutorials

Popular examples, reference materials, learn python interactively.

• CSS Introduction
• Include CSS in a Webpage
• CSS Essential Concepts

Combinators & Selectors

• CSS Selectors
• CSS Pseduo Class Selector
• CSS Pseduo Element Selector
• CSS !important
• CSS Units: em, px, rem etc.
• CSS Font Family
• CSS Font Size
• CSS Font Weight
• CSS Font Stretch
• CSS Text Color
• Use Custom Fonts in CSS

Text Formatting

• CSS Text Decoration
• CSS Text Transform
• CSS Text Spacing
• CSS Text Shadow
• CSS Text Align
• CSS Text Align Last
• CSS Vertical Align
• CSS Direction
• CSS Background
• CSS Background Color
• CSS Background Image
• CSS Background Repeat
• CSS Background Attachment
• CSS Background Size
• CSS Background Clip
• CSS Background Origin
• CSS Background Position
• CSS Opacity/Transparency

CSS Gradients

• CSS Gradients (Linear Gradient)
• CSS Radial Gradient
• CSS Borders
• CSS Border Style
• CSS Border Width
• CSS Border Color
• CSS Border Shorthand
• CSS Border Image
• CSS Border Radius

CSS Box Model

• CSS Height/Width
• CSS Box Sizing
• CSS Padding
• CSS Outline
• CSS Box Shadow

Display and Position

• CSS Display
• CSS Position
• CSS z-index
• CSS Overflow

CSS Float Layout

• CSS clear float
• CSS Creating Layout Using float
• CSS calc() Function

CSS Flexbox

• CSS Flex (Flexbox)
• CSS Flex Container
• CSS Flex items
• Creating Responsive Layouts using Flexbox
• CSS Grid Container
• CSS Grid Item
• Create an image gallery using CSS Grid

CSS Responsive Design

• Responsive Web Design
• CSS Media Query: @media
• Mobile First Design

CSS Transition, Transform, and Animations

• CSS 2D Transform
• CSS 3D Transforms
• CSS Transitions
• CSS Animations

Styling Elements

• CSS Buttons Styling
• CSS Forms Styling
• CSS Tables Styling
• CSS Lists Styling
• CSS Icons Styling
• CSS Img Styling

CSS Projects

• Technical Documentation Page
• Portfolio Site

The CSS box model is a fundamental concept that defines how the element's dimensions and spacing are calculated.

The box model treats every HTML element as a rectangular box consisting of content, padding, border, and margin.

The box model defines the layout of an HTML element in the following way:

The components of the box model are:

• content : actual text or image that is displayed in the element
• padding : transparent space between the content and the border of an element
• border : line that surrounds the padding and content within the element
• margin : transparent area added outside the border

The primary purpose of the box model is to explain how the dimensions and spacing of elements are calculated and how they relate to each other.

• Width and Height of an Element with Box Model

The box model is important for understanding how the width and height of an element are calculated.

The width and height of the element are applied only to the content of the element by default. Hence, the actual size of the element is calculated by adding the padding and border along with the specified width and height of the element.

Let's see an example,

Browser Output

In the above example, we have specified

The width and height of the div are applied only to the content of the element. The actual width and height of the element are:

Hence, the actual width becomes 450px , and the height becomes 130px .

Note : The margin is not added to calculate the actual size of the box, even though it affects the total space the box takes on the page. The border marks the boundary of the box area, and it does not extend into the margin .

• Box Model With Inline Elements

The box model is applied differently to inline elements. This is because inline elements don't have a default width or height and occupy space based on the size of their content.

In the above example,

• The height and width are ignored.
• The top and bottom margins are also ignored, and only the left and right margins work.
• The padding works for all four sides of the elements.

Hence, we cannot calculate the actual dimensions of the inline element.

In order to apply the box model in the inline elements, the display property should be changed to either inline-block or block .

Let's see an example with inline-block ,

In the above example, the box model works as expected. The actual width and height of the span element are calculated as:

Hence, the actual width and height become 130px and 70px respectively.

Note: The default behavior of the box model can be changed by the box-sizing property allowing developers to set the width and height intuitively.

You can learn more about the box-sizing property.

Table of Contents

• Introduction

Learn Box Model - CSS #1

Table of contents

Introduction, content area, padding area, border area, margin area, more with content sizing.

The CSS Box Model is the foundation of all CSS layouts. It defines how elements are sized, positioned, and displayed on a web page. My goal with this blog post is to help you understand the basics and jumpstart your journey for learning front-end development. We will cover the basic concepts of CSS Box Model, and understand the behaviour of elements!

Before we learn anything, we understand this one simple statement

" Everything is a BOX. "

If you know a little bit of HTML, you would remember <div> element. What it does is it creates a simple block, inside which we can write content, modify how it looks and shapes it into any form.

Yeah! A circle or a blob is also, a simple <div> box with high border-radius attribute value. It's all boxes.

When laying out a webpage, the browser's rendering engine represents each element as a rectangular box. The CSS decides the layout, size, and other styling for that box.

Now, there are 4 parts/areas to this box, decided by their respective edges:

To explain the areas of the CSS Box Model, we take the analogy of an art painting

This is where the content lives. It is bounded by a content edge, which can be controlled by the size of its parent, making it known as the "most variably sized area". More on this later on.

For an art painting, this is the art piece at the centre of attraction for everybody to see.

In simple terms, it is the space between the content area and the border. It is bounded by a padding edge.

Remember, padding is inside the box and surrounds the content area. If our box has overflow rules set, such as overflow: auto or overflow: scroll , the scrollbars will occupy this space too.

You can change the padding of an element using padding: 20px; or specific sides by padding-left:10px;

As simple as it sounds, the border surrounds the padding box and is the bounds of your box. By default in CSS, <div> Elements don't have borders. But you can add one using the shorthand property border: 2px dotted;

You can even adjust the width using border-width property

In an art piece, the border is the frame of the art painting and the space between the frame and the art piece is the padding.

Margin Area is the space around your box, defined by the margin property. It is bounded by the margin edge and is often used to separate the element from its neighbours. Properties like box-shadow and outline occupy this area.

You can add margins via the shorthand property margin: 20px; or be specific with margin-left: 69px;

For understanding sizing, we imagine a simple block of text <p> This is an example to help you understand content sizing </p>

and we have given it the styling of width: 50px; in CSS

Now, if the content is too big to fit in the box, it will overflow the content box area, the box is extrinsically sized. That means, when we give it a specific width or height to stay in, it will not change no matter if the content inside the box changes.

If we now remove the width: 50px; styling, then we can see the box gets bigger with the content box. So, as the content increases, the box increases in size. That means, the box is intrinsically sized and depends on the content.

This concept of "intrinsic sizing" and "extrinsic sizing" will help you develop on how you want your elements to behave.

As we go ahead with these basics, you will learn more on how to stylize elements to better represent our imagination.

If you want to learn more, I recommend the official MDN Docs for CSS and other interesting books from great CSS developers Official CSS MDN Docs Interesting Article from CSS Tricks

In the next blog posts, you will learn about CSS Selectors and other important concepts that go around with them. If you like what you read, please support us by giving us a like or a follow!

Let's keep experimentin'

Understanding the CSS Box Model

1500+ free HTML templates for vanilla CSS, Bootstrap, Tailwind, React and more

I didn’t learn CSS systematically. First I started playing with colors and fonts, then I started building (those insane, red-green) ‘table-based’ layouts. And then suddenly I came across the CSS box model . On the same day I truly started learning web design.

The model helped me understanding the relationship between margin, padding, border, the width and the height of the elements.

Understanding the box model in CSS is a foundation step in one’s learning to CSS and web design properly – because it helps you to know the sizing of layouts more closely and effectively – which is the key phase of web design. How? We’re going to know in this article further. So, without much a do, lets get started.

The basics of CSS Box Model

Every markup element is a rectangular box, that we can enhance and style using CSS. Concentrate on the below figure that demonstrates a markup element as a box:

In the above figure, our markup element – let us say it box – 150 pixels wide, carries padding and margin of 20 pixels on each side, with a border of width 1 pixel each side. I have done some highlighting in the figure to demonstrate where a particular thing lies.

The first most or the orange part of the figure is the margin of our box, the dark green colored line is it’s border, and the innermost, green colored part is the padding. Let me explain these three terms one-by-one hierarchically.

• Margin : It lies outside the box and is basically used to separate itself from other markup elements.
• Border : It is the border of our box, that also lies outside but before margin.
• Padding : Lies inside of the box, creates inner space in the box when used. It lies after the border.

I think I don’t need to explain the width and height attributes, as these are very common terms .

Calculating net height & width of the box

Margin, border and padding – altogether make the overall width and height of our box. So, as of the Box model, the net width of the box would rely on the below expression:

Width + Left margin + Right margin + Left border + Right border + Right padding + Left padding

Based on the above formula, the total width of our box is:

Similarly, the height of the box can be calculated using this way:

Height + Top margin + Bottom margin + Top border + Bottom border + Top padding + Bottom padding

Which gives (we didn’t apply any height to our box):

So, basic addition can give us the overall height and width for markup elements, and this way we can plan the workaround for the other elements of our layout, for example: by knowing the net width of content area, we can decide or adjust width for the sidebar.

The box model approach applies to every element regardless of it carries an inline or block display.

Box model in Firebug / Inspect Element

Using the developer tools in your web browser, you can quickly view the box model for your layout’s elements. Press Ctrl/Cmd+Shift+i to quickly bring up the developer options.

Chrome Developer Tools

Firefox’s inspect element, playing with boxes.

If you want to see the box model approach in action right in your browser, just apply colored outlines to all of the elements (or the most important i.e. the building blocks) in your markup. Below give tiny CSS snippet will help you to highlight every ‘box’ of your web layout.

That pretty much wraps it up. I hope this article has explained you the model well. Kindly share your thoughts on this topic using the comments section below.

Read further

• The Box Sizing Reset in CSS
• A Guide to CSS3 Rounded Corners
• Techniques to clear floats in CSS

We push blog updates with the help of Feedburner. You'll get a notification every time a post gets published here.

Load Comments...

Learn CSS intuitively - Box Model

Published on March 21, 2023 · Tagged with learn intuitive-series

By Kushagra Gour

Hey there! Welcome to our new series of posts where we try to decipher CSS concepts in an intuitive manner - by relating those concepts to something you already know in the real world so that we can learn CSS like never before! Are you ready for the first concept?? Let's go! 🚀

First up is - The "CSS Box Model". Everything on a webpage is a box for CSS and every box is like a sandwich 🥪! Just like a sandwich has several layers, each with its own purpose, a box in CSS has several layers that make up its overall appearance and behavior.

Let's break down the CSS box model into its layers, starting from the inside out:

• Content: The content layer is like the yummy filling in a sandwich . It's the actual content that goes inside the box, such as text, images, or other HTML elements (boxes).
• Padding: The padding layer is like the crust of a sandwich . It surrounds the filling and separates it from the wrapping paper of the sandwich. Similarly, padding provides a buffer between the content and the edges of the box. You can add padding to create some breathing space around the content.
• Border: The border layer is like the wrapping paper around a sandwich . It adds a visible border around the content and padding layers. You can customize the border's thickness, color, and style.
• Margin: Lastly, the margin layer is like the empty space around a sandwich on a plate . It's the space between the box and any surrounding elements. You can add margin to create some distance between the box and other elements on the page...so that your sandwiches don't just touch each other. 😁

So, you can see that just like how a sandwich has multiple layers that make up its structure and appearance, the CSS box model has multiple layers that does the same for the box. Understanding the box model is very important in controlling the layout of your web pages, so make sure you practice it well enough. You can hop over to CSSBattle and solve some targets to practice your box model learnings.

How did you like this post? Do you have questions about the CSS box model? What next concept would you want us to give a shot at?

Let us know on our forum or on the Twitter post.

Want to write for CSSBattle? Mail us your pitch .

WDD 130 : Web Fundamentals

Css: box model.

CSS Box Model is a box that wraps around every element. From the inside out the model defines for rendering the content, padding, border, and finally margin.

"When laying out a document, the browser's rendering engine represents each element as a rectangular box according to the standard CSS basic box model. CSS determines the size, position, and properties (color, background, border size, etc.) of these boxes." - MDN

• Content: This is where the text and images appear.
• Padding: This is the area around the content and separates the content from the border.
• Border: The border goes around the padding and separates the padding from the margin.
• Margin: This the the area outside of the border and can extend beyond the physical characters of the box model.
• Read: 📄 Introduction to the CSS basic box model - MDN
• Watch: 🎦 The Box Model - (5:19 mins, The Box Model Transcript )
• Read: 📄 Box Sizing: Border Box

Activity Instructions

• In the " week02 " folder, create a file named " box-model.html ".
• Add a folder named styles and put a CSS file named box-model.css in that folder. At this point in the course, setting up the folders and files to complete activities and assignments should be a common task where you need little direction.
• Link to the CSS in your HTML document.
• Copy the HTML from the HTML section of this CodePen into box-model.html file. You will have to add the minimum HTML structure to make this work. ⚙️ CodePen - Box Model Start
• Copy the CSS selectors from the CSS section of this CodePen into box-model.css file.

• Test your page in your local browser using Live Server.
• Commit and push your work to your wdd130 GitHub Pages repository. See your published page at this url: https:// githubusername .github.io/wdd130/week02/box-model.html

CSS Box Model Design - Assignment-2

Nested box layout assignment.

C reate a nested box layout using HTML and CSS that visually represents the structure of the box model.

Background Colors:

• Outermost Box: Light Coral ( #F08080 )
• Border Box: Pale Turquoise ( #AFEEEE )
• Padding Box: Pale Green ( #98FB98 )
• Content Box: Sky Blue ( #87CEEB )

Required CSS Properties:

• margin : Apply to create space around the outermost box.
• border : Define on the border box to simulate a border.
• padding : Use on the padding box to create space around the content box.
• background-color : Assign to each box for visual distinction.
• width and height : Optionally specify for each box or use default content size.
• box-sizing : Set to border-box to include padding and border in the element’s total width and height.

HTML Structure:

• Use <div> elements nested within each other.

Deliverable:

A static HTML page with a responsive nested box design that maintains the visual hierarchy on different screen sizes.

Ensure that your final design is centered on the page and that each box is clearly distinguishable with the specified background colors. This exercise will help you understand how to use CSS to style elements and manage layout with the box model.

• Author : Jayanthbabu
• Link : https://programwithjayanth.com/assignments/css/css-box-model-design/
• Complete HTML Guide
• Registration Form Design Assignment - 3
• HTML and CSS Recipe Card: Assignment-6
• What are Semantic Elements in Html5?
• What is the use of for attribute in HTML?

🤖 Level up your chatbot knowledge with our latest AI course.

Join our free community Discord server here !

Learn React with us !

Get job-ready with our Career Toolbox Track's career advice, resume tips, and more 💼

Practice CSS Box Model Basics

7-minute css practice, about this practice.

Practice working with the core components of the CSS box model.

Guil Hernandez

Guil is a Full Stack JavaScript and Front End Web Development instructor.

Download videos

You need to sign up for Treehouse in order to download course videos.

Search code, repositories, users, issues, pull requests...

Provide feedback.

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly.

To see all available qualifiers, see our documentation .

• Notifications

css box model practice

TIMOHMWATHI/CSS-Box-Model-Assignment

Folders and files.

• HTML 100.0%

CSS Box Model

HTML page is a collection of HTML elements (ex: P, DIV, H1). Each element is considered as a box. Each box has four areas/layers.

• First area is a content area. Content can be text, image, etc.,
• Around content area, padding area (space around the HTML element content) is applied.
• Around padding area, border area is applied.
• Around border area, margin area (space around the HTML element border) is applied.

Each element’s content, padding, border and margin properties can be adjusted. All the time, padding, border and margin properties are applied to each element implicitly or explicitly.

HTML elements are categorized as block-level elements and inline elements.

What is Block-level element?

Block-level elements by default start on a new line and occupies full page width. Width and height properties are respected to block-level elements. Using display property, block-level elements can be converted to block-inline, inline, etc., elements, Few block-level elements are <div>, <p>, <pre>, <h1>,<h2>,<ul>,<ol>.

What is inline element?

Inline elements by default occupies only required width based on content size. Width and height properties are not respected/applicable to inline elements. Using display property, inline elements can be converted to block, block-inline, etc., elements. Few inline elements are <a>, <span>, <img>, <i>.

Block-level vs Inline elements.

• Block-level elements by default start on a new line and occupies full page width. But, Inline elements by default occupies only required width based on content size.
• Width and height properties are applicable to block-level element but not to inline elements.
• Inline elements can be placed inside the block-level element, but block-level elements can not be placed inside the inline element.
• All padding and margin properties affect block-level elements.
• padding-top
• padding-bottom
• margin-bottom

Remaining padding and margin properties only affects inline elements.

Following example shows box model (on right side top) diagram for left side specified code.

In the above example,

• Top left section has CSS properties of the P element.
• Bottom left section has HTML code of the P element.
• Top right section shows, Box model diagram of the P element (copied from chrome browser’s developer tool section).
• Bottom right section shows, actual output of this HTML code.

Content is the first area in the box model. Content denotes text, image, etc., inside the HTML elements.

• Content part has an image and text.
• Background color has been applied.
• More Information

Padding is the second area around the content area. Padding is a space around the HTML element content. Padding can set all sides, or one or more sides of the element.

Padding property shorthand syntax

padding: <padding top value> || <padding right value> || <padding bottom value> || <padding left value>

Padding property longhand syntax

padding-<top || right || bottom || left>:<value>

• Around content, padding space 20px is added to all four sides.

Border is the third area around the padding area. Border property is used to style the border of the element. Border property sets the value of border-width, border-style and border-color.

Border property shorthand syntax

border: [<border width>] <border style - required> [<border color>]

System takes default values for border width and border color when no values specified.

Border property longhand syntax(core)

border-<width || style || color>:<value>

• With padding, border width 1px, border style Solid and border color Red are applied.

Margin is the fourth area around the border area. Margin is a space around the HTML element border. Margin can set all sides, or one or more sides of the element.

1. There is no margin color property.

2. By default, when parent element has background color then the same color applies to child element margin also else no background color applies.

Margin property shorthand syntax

margin: <margin top value> || < margin right value> || < margin bottom value> || < margin left value>

Margin property longhand syntax

margin-<top || right || bottom || left>:<value>

• With padding and border, margin bottom -8px is applied here. Margin property centered the image.

CSS Collapsing Margins

When vertical margins of two elements touch, margin collapse happens (both margins are not applied/honored as specified). Details are explained below.

• If one element vertical margin height is greater than other, greater vertical margin height is only applied (10px 20px -> 20px).
• If both vertical margin heights are same, one vertical margin height is only applied (10px, 10px -> 10px).
• If one element vertical margin height has positive value (ex: 30px) and another vertical margin height is negative value (ex: -10px) then addition of both values is (30px + (–10px) = 20px) applied.
• If both elements vertical margin heights are negative then greater negative vertical margin height is only applied (-10px, -20px -> -20px).

In the above example, bottom margin 20px is applied to P element and top margin 30px is applied to DIV element. Since margin collapse happened, only margin 30px is applied in between P and DIV elements not 50px is applied.

CSS Auto Margin

Set margin property with value auto to block-level element helps to horizontally center the block-level element (not text inside the element).

• Here, margin top (margin-top:0;) and margin bottom (margin-bottom:0;) values set to 0. Margin right (margin-right:auto) and margin left (margin-left:auto) values set to auto.
• P element width is set to 600px. P element is centered based on remaining available space.
• Auto margin can be applied only to block-level elements (ex: <div>, <p>, <pre>, <h1>,<h2>,<ul>,<ol>) .
• Using margin:auto property, element can horizontally only centered.
• Auto margin property can not be applied to inline elements (ex: <a>, <span>, <img>, <i>) .
• Auto margin property can not be applied to absolutely positioned block-level elements (ex: position:absolute;).
• Auto margin property can not be applied to float property with value left/right (ex: float:left;) applied block-level elements.

CSS Shorthand properties

CSS shorthand (ex: padding:20px) properties can be used instead of longhand version properties (ex: padding-top:20px, padding-right:20px, padding-bottom:20px, padding-left:20px).

1. Shorthand properties applicable order to the HTML element is Top, Right, Bottom and Left. If only one value is specified, then that value is applied to all four sides of the element.

In the above example, padding 20px is applied to all four sides of the element.

2. If two values are specified, then first value is applied to top and bottom sides of the element. Second value is applied to right and left sides of the element.

In the above example, padding 20px is applied to Top and Bottom sides of the element. Padding 10px is applied to right and left sides of the element.

3. If three values are specified, then first value is applied to top side of the element. Second value is applied to right and left sides of the element. Third value is applied to bottom side of the element.

In the above example, padding 20px is applied to top side of the element. Padding 10px is applied to right and left sides of the element. Padding 5px is applied to bottom side of the element.

4. If four values are specified, then first value is applied to top side of the element. Second value is applied to right side of the element. Third value is applied to bottom side of the element. Fourth value is applied to left side of the element.

In the above example, padding 20px is applied to top side of the element. Padding 10px is applied to right side of the element. Padding 5px is applied to bottom side of the element. Padding 2px is applied to left side of the element.

Style one or more sides of the element/box.

Apply padding/margin/border to one or more sides of the element is also possible. Every element has four sides, those are Top, Right, Bottom and Left.

<padding/border/margin>-<top/right/bottom/left>:<value>

In the above example, padding bottom(10px), border bottom (1px solid red) and margin bottom(5px) properties are applied to bottom side of the H1 element. Padding top(30px), border top(2px solid #0026ff) and margin top(20px) properties are applied to top side of the H1 element. No styles are applied to right and left side of the H1 element.

Calculate the element total width and height

Element is considered as a box and wrapped with multiple areas/layers (padding, border and margin). Using below example, let us see how to calculate an element height and width.

Above P element total height and width are calculated following way.

Total height = 60px (content height) + 40px (padding left) + 40px (padding right) + 15px (border left) + 15px (border right) + 20px (margin left) + 20px (margin right) = 210px.

Total width = 150px (content height) + 40px (padding top) + 40px (padding bottom) + 15px (border top) + 15px (border bottom) + 20px (margin top) + 20px (margin bottom) = 300px.

Total height of the above P element is 210px.

Total width of the above P element is 300px.

CSS Box Model Tips

• If no padding is declared, then browser specific default padding is applied to an element. Default padding is mostly 0 or very negligible amount. p { /*padding:10px;*/ border:1px solid red; margin:20px; }
• If no border style is specified, then no border style(border-style:none) is applied to an element by default. p { padding:10px; /*border:1px solid red;*/ margin:20px; }
• If no margin is declared, then browser specific default margin is applied to an element. Default margin is mostly 0 or very negligible amount. p { padding:10px; border:1px solid red; /*margin:20px;*/ }
• If no width is specified to block-level element, then block-level element takes 100% width by default. p { border:1px solid red; /*width:150px;*/ }

• There is no direct way to apply color to element’s margin space.
• Parent element background color is applied to child element margin space by default.

Note:Outside border is manually added to show the margin space area.

• Longhand padding property syntax start with padding-xxx:<value>. p { padding-top:20px; }
• Longhand margin property syntax start with margin-xxx:<value> (ex: margin-top:10px). p { margin-top:10px; }
• Longhand border property syntax start with border-xxx:<value>. p { border-color:red; }
• Better to use shorthand properties if possible. p { border:1px solid green; }
• Be aware of vertical margin collapse.
• Based on different browser (Chrome/IE/Firefox/etc.,), padding/border/margin outputs could be little different.

For Chrome, it starts with “-webkit-“

For IE, it starts with “-ms-“

For Firefox, it starts with “-moz-“

Example: Apply padding, border and margin to P element content.

• Two P elements are placed.
• For all the P elements, common CSS styles are applied
• For each P element, CSS properties padding, border and margins are applied.
• P element content is “One”.
• Around the content, padding is applied.
• Around the padding, border (green color) is applied.
• Around the border, margin is applied.

Using Chrome browser’s developer tool, one P element is explained.

Related topics:

In the above examples different CSS units are used. Please refer the following links to know better about CSS units.

• Relative unit (vh, vw, vmax, vmin)
• Absolute units (pt, cm, in, mm, pc)

If you liked this article, please share it with your friends on social media. Thank you!

• Terms of Use
• Privacy Policy

CSS Tutorial

Css properties, css advance, css questions, miscellaneous.

Interview Questions

Here, to explain the CSS box model, we have an instance.

After the compilation of the above code, you get the following output.

Here, we also have an illustration to describe the CSS box model.

After the execution of the code, you get the following output:

Important Point: In the CSS box model, the subject area of an entity box is the region where the content, such as image, text, video, etc., initially appeared. It may also retain boxes of decedent elements.

• Send your Feedback to [email protected]

Help Others, Please Share

Learn Latest Tutorials

Transact-SQL

Reinforcement Learning

R Programming

React Native

Python Design Patterns

Python Pillow

Python Turtle

Preparation

Verbal Ability

Company Questions

Trending Technologies

Artificial Intelligence

Cloud Computing

Data Science

Machine Learning

B.Tech / MCA

Data Structures

Operating System

Computer Network

Compiler Design

Computer Organization

Discrete Mathematics

Ethical Hacking

Computer Graphics

Software Engineering

Web Technology

Cyber Security

C Programming

Control System

Data Mining

Data Warehouse

CSS Tutorial

Css advanced, css responsive, css examples, css references, css box model.

All HTML elements can be considered as boxes.

The CSS Box Model

In CSS, the term "box model" is used when talking about design and layout.

The CSS box model is essentially a box that wraps around every HTML element. It consists of: content, padding, borders and margins. The image below illustrates the box model:

Explanation of the different parts:

• Content - The content of the box, where text and images appear
• Padding - Clears an area around the content. The padding is transparent
• Border - A border that goes around the padding and content
• Margin - Clears an area outside the border. The margin is transparent

The box model allows us to add a border around elements, and to define space between elements. 

Demonstration of the box model:

Advertisement

Width and Height of an Element

In order to set the width and height of an element correctly in all browsers, you need to know how the box model works.

Important: When you set the width and height properties of an element with CSS, you just set the width and height of the content area . To calculate the total width and height of an element, you must also include the padding and borders.

This <div> element will have a total width of 350px and a total height of 80px: 

The total width of an element should be calculated like this:

Total element width = width + left padding + right padding + left border + right border

The total height of an element should be calculated like this:

Total element height = height + top padding + bottom padding + top border + bottom border

Note: The margin property also affects the total space that the box will take up on the page, but the margin is not included in the actual size of the box. The box's total width and height stops at the border.

Test Yourself With Exercises

Set the width of the <div> element to "200px".

Start the Exercise

COLOR PICKER

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail: [email protected]

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail: [email protected]

Top Tutorials

Top references, top examples, get certified.