How to avoid width or height increasing or decreasing when margins, paddings, outline, etc. are applied to an HTML element?
Tags: css
Published: 2021-06-30 00:00:00

---
  title: How to avoid width or height increasing or decreasing when margins, paddings, outline, etc. are applied to an HTML element?
  published: true
  tags: CSS
  date: Wed Jun 30 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/avoid-height-width-increase-when-using-margin-padding-outline-on-html-element-tags
  cover_image: https://melvingeorge.me/_next/static/images/main-cc423bdd2fe0e61e143f56f9407b733c.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/avoid-height-width-increase-when-using-margin-padding-outline-on-html-element-tags)
  
To avoid the `width` or `height` getting increased or decreased when using CSS properties like `margin`, `padding`, etc, we can use the CSS property called `box-sizing` and set its value to `border-box` on the element in CSS.

### TL;DR

**HTML**

```html
<!-- div HTML tag -->
<div>Hello World!</div>
```

**CSS**

```css
.myDiv {
  height: 100px;
  width: 200px;
  background-color: red;
  padding: 20px;
  box-sizing: border-box; /* add this */
}
```

For example, first let's make a `div` HTML element tag with content `Hello World!` inside it like this,

```html
<!-- div HTML tag -->
<div>Hello World!</div>
```

Now let's add a class name called `myDiv` so that we can reference this `div` in CSS. It can be done like this,

```html
<!-- div HTML tag -->
<div class="myDiv">Hello World!</div>
```

Now inside our CSS we can use the `myDiv` class and set the `div` HTML element tag's height to `100px`, its width to `200px` and a background color of `red`. It can be done like this,

```css
.myDiv {
  height: 100px;
  width: 200px;
  background-color: red;
}
```

Till here we are ok. We have a well-shaped box with a height of `100px` and a width of 200px.

Now to understand the problem a little better, let's also add a `padding` of `20px` to the `myDiv` like this,

```css
.myDiv {
  height: 100px;
  width: 200px;
  background-color: red;
  padding: 20px;
}
```

Now the `div` element's height and width are also increased because the padding added `10px` to all the four sides of the `div` element, so now the height of the `div` becomes `140px` and the width becomes `240px` which may make styling sometimes a bit tricky and unpredictable.

I have added a small gif to show the problem. This is what will happen to the `div` element if the padding is added and not added.

![div element's height and width increasing/decreasing on adding padding](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/26vskhpi8rirkuwge851.gif)

So why does this happen?

This is because browsers by default add all the `padding`, `margins`, etc to the overall `height` and `width` of the element, in our case it is the `div` HTML element.

By default, the `box-sizing` CSS property of the element will be set to `content-box` which causes this unpredictable behavior.

To avoid this issue we can use the `box-sizing` property and set is value to `border-box` like this,

```css
.myDiv {
  height: 100px;
  width: 200px;
  background-color: red;
  padding: 20px;
  box-sizing: border-box;
}
```

Now we will have something where the `height` and `width` of the overall `div` element are not increased but restricted with the defined height and width of the box.

It will look like this,

![div element's height and width  not increasing on adding padding](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wnoowhhju4sp85ah2g0z.gif)

Which is the result we need! Yay 🎊!

See the above code live in [JSBin](https://jsbin.com/dixojekise/1/edit?html,css,output)

That's all! 😃

### Feel free to share if you found this useful 😃.

---