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.
5 Answers
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.
-
Yes, adding another DIV around is probably the only way to get this done. You may still use
margin
for the inner element (may requirebox-sizing: border-box
if borders are used andwidth: 100%
shall be set), if the desired width is set to the outer element. May 7, 2016 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 May 26, 2017 at 6:17
if your margin is for example 10px you can use
width: calc(100% - 20px);
box-sizing: border-box;
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
-
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 TMay 21, 2015 at 20:09
-
1Not sure why this is voted down, it would seem to be the most sensible way to tackle the problem.– BJuryJun 2, 2016 at 11:32
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>
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>
-
Works well if you have the possibility to split your content into rows explicitly via HTML Feb 14, 2017 at 19:38
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.padding-box
includes the padding size only, andborder-box
includes the padding and border soborder-box
is closer to your requirements.padding-box
in a wrong way. You are right.