54

I want box width and height to include all of the content, padding, border width, and margin by default. Is there a way to do this? Especially, I want to be able to specify something like width: 100% including everything up to the margin.

cimmanon
  • 67,211
  • 17
  • 165
  • 171
sawa
  • 165,429
  • 45
  • 277
  • 381
  • 4
    None box-sizing value includes margin size. `border-box` includes everything but margin: **The width and height properties include the padding and border, but not the margin. This is the box model used by Internet Explorer when the document is in Quirks mode.** – AlecTMH Jan 19 '13 at 17:11
  • 1
    You're trying to include to width/height as much as possible, `padding-box` includes the padding size only, and `border-box` includes the padding and border so `border-box` is closer to your requirements. – AlecTMH Jan 19 '13 at 17:16
  • @AlecTMH Okay. I was interpreting `padding-box` in a wrong way. You are right. – sawa Jan 19 '13 at 17:19
  • This was a big help for me, box size is boxwidth+padding+border (but not margin): insert in CSS: *, *:before, *:after {-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box} – luvTweb Nov 08 '14 at 09:01
  • I think if you are using a DIV. which by default a display:block element will include all the things within container. can you tell where do you want to use exactly? – murli2308 Nov 10 '14 at 08:06
  • @sawa, you should get very familiar with this: https://developer.mozilla.org/en-US/docs/Web/CSS/box_model and https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing – Seed Nov 12 '14 at 20:53
  • Possible duplicate of [CSS 100% height with padding/margin](https://stackoverflow.com/questions/485827/css-100-height-with-padding-margin) – Robin Métral Aug 01 '18 at 04:28

5 Answers5

33

This is a vague question, but I'll answer the best I can.

Margin, by definition, is the area around the outside of your box; meaning there's no way to include margins inside of your div.

If you would like more padding on the inside of your box, but you don't want the box to resize, then use: box-sizing:content-box;
Or if you would like to include padding and the border, use: box-sizing:border-box;

A workable solution that preserves the size of your divs and removes overflow would look something like this:

#parent{
    box-sizing:border-box;
    width:100%;
    height:200px;
    padding:2em;
}
#child{
    box-sizing:border-box;
    width:100%;
    height:100%;
    padding:1em;
}

<div id="parent">
   <div id="child"></div>
</div>

Just place the div you want to give margins to inside of another div that has padding. Thus creating faux margins.

mortalis
  • 2,060
  • 24
  • 34
ExcellentSP
  • 1,529
  • 4
  • 15
  • 39
  • Yes, adding another DIV around is probably the only way to get this done. You may still use `margin` for the inner element (may require `box-sizing: border-box` if borders are used and `width: 100%` shall be set), if the desired width is set to the outer element. – BurninLeo May 07 '16 at 13:41
  • it is the issue when you want clean code, many divs in row, each with background image. you want some specific gaps between, only solution is flex or wrap it in another div which in my opinion should be absolutely unnecessary – The Vojtisek May 26 '17 at 06:17
28

if your margin is for example 10px you can use

width: calc(100% - 20px);
box-sizing: border-box;

browser support

w3schools.com reference

Sawyer
  • 297
  • 3
  • 3
6

Set the CSS box-sizing property to border-box to make width and height include the content, border, and padding. This allows you to set width: 100% and still add padding or border. In other words box-sizing: border-box makes width include everything between the inner edges of the margin. There is no way to include the margin itself in such a way.

.example { box-sizing: border-box; width: 100%; padding: 10px }

Useful references

ryanve
  • 50,076
  • 30
  • 102
  • 137
  • border-box doesn't seem to help in my case, when I applied it to the body element in attempt to allow height: 100vh size the body to the page without scroll bars. The scroll bars still happened. – B T May 21 '15 at 20:09
  • 1
    Not sure why this is voted down, it would seem to be the most sensible way to tackle the problem. – BJury Jun 02 '16 at 11:32
2

Maybe wrap another div around it and specified that div's width?

<div style="width: 100px; border: 1px solid blue;">
<div style="width: 100px; background:yellow; margin: 10px; border: 1px solid blue">
inner width 100px not including it's margin.
</div>
</div>

<div style="width: 100px; border: 1px solid blue">
<div style="background:yellow; margin: 10px; border: 1px solid blue">
  inner width's 100px including it's margin.
</div>
</div>
yuchien
  • 1,462
  • 1
  • 12
  • 14
0

Use display: flex; for the parent tag.

For example:

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  border: 1px solid black;
  width: 100%;
  overflow: auto;
  box-sizing: border-box;
  display: flex;   /* it can put children in one line */
}

.left {
  border: 1px solid black;
  width: 20%;
  float: left;
  box-sizing: border-box
}

.right {
  border: 1px solid black;
  width: 80%;
  margin: 0 10px;
  float: left;
  box-sizing: border-box;
}
</style>
</head>
<body>
<div class="center">
  <div class="left">left</div>
  <div class="right">right</div>
</div>
</body>
</html>
Gediminas Masaitis
  • 3,172
  • 14
  • 35
Omid
  • 21