DEV Community

Cover image for Box Model in CSS:- "Boxes - Boxes rectangular Boxes Everywhere πŸ˜…"
Mahesh Patidar
Mahesh Patidar

Posted on

Box Model in CSS:- "Boxes - Boxes rectangular Boxes Everywhere πŸ˜…"

The first thing you need to understand is that, Everything you see on a web page is made up of rectangles boxes.

on a website, you will see all the content is just a combination of boxes, Arranged on top to, on next to, bottom, or nested in each other.

Header, nav, footer everything made up with boxes. Usually, we called it HTML elements instead of rectangles boxes.

π˜‰π˜°π˜Ήπ˜¦π˜΄ - π˜‰π˜°π˜Ήπ˜¦π˜΄ 𝘳𝘦𝘀𝘡𝘒𝘯𝘨𝘢𝘭𝘒𝘳 π˜‰π˜°π˜Ήπ˜¦π˜΄ 𝘌𝘷𝘦𝘳𝘺𝘸𝘩𝘦𝘳𝘦 πŸ˜…

Take a look below πŸ‘‡

Example Image

Code added by me to see all the boxes πŸ‘‡

* {
 outline: 2px solid #ffb400 !important;
}
Enter fullscreen mode Exit fullscreen mode

What is the Box model in CSS?

Whenever you create an HTML element it is wrapped around in a box, and we are able to modify it using CSS.

this box is built with several different layers such as margin, padding, border, and content.

and with the help of CSS, we can manipulate the size, position, and properties of these boxes.

It is used to develop the design and structure of a web page.

Layers of Box Model:-

  • Content Area
  • Padding
  • Border
  • margin

Let's talk about each Layer of Box model.

βœ” Content Area:-

The content area contains the real content which is put inside HTML elements such as text, image, etc.

The width and height properties define the width and height of the content box.

content area

Also, you can define the width and height of content with other properties such as,

max-width, min-width, max-height, and min-height set constraints and not a fixed size.

if we didn't define height and width then it will calculate based on content, But we have also the option to set fixed height and width with the given properties.

take a look below πŸ‘‡

code

Output -

output

βœ” Padding:-

Padding in CSS refers to the space between the border and the element content.

To set padding on top, right, bottom, and left. we have properties such as

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

Padding

The padding shorthand defines all four sides of an element in one declaration.

p {
   padding:20px;
}
Enter fullscreen mode Exit fullscreen mode

βœ” Border:-

The border in CSS is between the margin and padding components of the box model.

Usually, we see the border around buttons like this πŸ‘‡

border

the border shorthand property takes three inputs:

- border size
- border-style : solid/ dashed
- border-color
Enter fullscreen mode Exit fullscreen mode
button {
     border: 2px solid #ffb400;
}
Enter fullscreen mode Exit fullscreen mode

List of border styles we can use πŸ‘‡

βœ” margin:-

margin is nothing but space between the box and surrounding boxes.

To set the margin on the top, right, bottom, and left. we have properties such as

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

margin

The margin shorthand defines all four sides of an element in one declaration.

div {
  margin: 30px;
}
Enter fullscreen mode Exit fullscreen mode

The size of the box is calculated like this:

π“π¨π­πšπ₯ 𝐖𝐒𝐝𝐭𝐑 = width + padding-left + padding-right + border-left + border-right.

π“π¨π­πšπ₯ π‡πžπ’π π‘π­ = height + padding-top + padding-bottom + border-top + border-bottom.

the way the default box model calculates the width and height of elements add so many problems because in total width and height padding and border also added.

🀜 To solve this issue another property was introduced known as box-sizing.

What is box-sizing?

The CSS box-sizing sets the way the total width and height of HTML elements should be calculated.

Values you can specify:-

  • content-box
  • border-box

βœ” content-box -

By adding content-box nothing will change because it is the default behavior of the box-sizing property.

If you set Width, padding, and border like this πŸ‘‡

content-box

βœ” border-box -

Border box is the best choice, it says the content box shrinks to add padding and border.

if you add 300px width to box and 20px padding and 3px border.

all of this together becomes 300 because the content box shrinks to add padding and border.

border-box

𝐓𝐒𝐩: border-box is the best choice for designing layouts and managing the sizes of HTML elements.

No need to set this property for each element individually.

box-sizing Reset Method

html {
   box-sizing: border-box;
}

*, *::before, *::after {
   box-sizing: inherit;
}

Enter fullscreen mode Exit fullscreen mode

if you're not familiar with inheritance and global reset,

then take reference from this blog to understand the above code.

https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/

😍 We learned enough theory let's see it in an action.

notice the difference in the size of both elements in code and after inspecting the element.

codepen πŸ‘‡

Key Points -

  • always prefer border-box.
  • Use the Browser tool to see the exact calculated size of an element.
  • Use global reset for ease of work.

Conclusion -

ok, that's it, we covered all the most important parts of the box model.😍

Thanks for stopping and checking these resources, I'm sure it's going to help you at some point in time.

If you enjoyed reading then don't forget to share with other Devs tooπŸ˜‡.

Let's connect with me on

Top comments (3)

Collapse
 
posandu profile image
Posandu

What happened to the URL?

Collapse
 
thomasbnt profile image
Thomas Bnt β˜•

The title is written with special caracters

Collapse
 
ali6nx404 profile image
Mahesh Patidar

yess πŸ˜… i didn't notice about url