# Css BoxMODEL.

The CSS box model is the combined position of borders, margins, padding, and elements or content around HTML elements. Box model properties define border, margin, padding, or outline around any content.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1675660161801/3554ca8b-c397-4c10-97a2-caeb18a4cb06.png align="center")

# **Parts of the CSS Box Model**

**Margin** - The margin is defined as the space around the border. No color can be used on the surface or background of the margin, it is completely transparent.

Let's begin by seeing the properties:

```css
margin-left: x;
margin-right: x;
margin-top: x;
margin-bottom: x;
margin: x ?y ?z ?w
```

where x,y,z,w can have the values of px|rem|%|vw|vh.

margin is shorthand for all the 4 above margin properties. It goes clockwise starting from the top element if you add all 4 of the values. If you just add x,y the the margin of x will be applied on top and bottom of the element and the margin of y will be applied to the left and right of the element. If only x is applied the the margin will be applied to all 4 sides.

### Examples

**margin:20px**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1675667068815/fe496233-dbae-4435-ae3e-130c20ac3bc7.png align="center")

[  
](https://res.cloudinary.com/practicaldev/image/fetch/s--AEAVWk_S--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.imgur.com/TIAd6L5.jpg%3F1)

**Border** - The border is located around the content padding, that is, between the margins and the padding. The color of the surface or background influences the border.

**Padding**\- The space around the content is determined using padding. No color can be used on the padding surface or background, it is completely transparent.  
Content Itself- Any content in the box model is text, images, etc., which are displayed on the web page.

There are four padding properties,

```css
padding-top
padding-right
padding-bottom
padding-left
```

All the padding properties can be changed independently or a short hand `padding` property can be used to change all the values at once.  
Short hand properties syntax:

`padding`: `padding-top` `padding-right` `padding-bottom` `padding-left`;

### Example

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1675667217642/548ca566-ebc7-4f5f-a946-05b78d53a252.png align="center")

**Content Itself** - Any content in the box model is text, images, etc., which are displayed on the web page.

# Box Model: Width and Height

Everything in CSS is a box. Those boxes have different properties. The browser treats everything on a web page as a box, even though the item may not look like a box.

The width of the CSS property sets an elements width.  
The height of the CSS property sets an elements height.

div {  
width: 350px;  
height: 150px;  
}

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1675668221373/480a5d1c-d6d4-4fd2-8bd3-c2b0ca349803.png align="center")

### Box Model: Border and Border-Radius

Borders are important because they can make clear what certain things do, or bring attention to certain elements. Borders can change when they are interacted with.

### Border Properties

**Border-width**

Controls the thickness of the border.

##### **Border-Color**

Controls the color of the border

##### **Border-Style**

Controls the line style - dashed, solid

### Example

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1675668082968/071034ab-9c3f-40e8-ac13-57f986db0f30.png align="center")

### Box-Model: Padding

Padding Properties

#### **Individual properties**

Padding-Left  
Padding-Right  
Padding-Bottom  
Padding-Top  
shorthand properties is where you can set all foursides at once.

### Box-shadow

The box-shadow property adds a shadow effect to an element. This shadow is a box in itself –although it doesn't occupy any space–, and contrary to the outline's behavior, it goes under the content/elements in the box model instead of on top.

The visualization of the box-shadow is also interesting because it will start from the border, but which edge of the border depends on the type of shadow: drop shadows (default) grow from the border edge (the outer edge of the border), while inset shadows grow from the padding edge (the inner edge of the border).

### Example

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1675667951864/c60f10d9-d4f5-4dfa-9998-309b583a34c4.jpeg align="center")

## Wrap Up

Great! Now we know what CSS Box Model is and why it is so useful for aligning HTML elements in our web pages.  
We got a good grasp of the differences between the Content Box Model & Border Box Model.