Including margin for width and height

前端未结

关注

 5  1188

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

相关标签:

5条回答

刺人心

2020-12-29 02:10

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>

0 讨论(0)

野性不改

2020-12-29 02:12
if your margin is for example 10px you can use
```
width: calc(100% - 20px);
box-sizing: border-box;
```
browser support

w3schools.com reference
0 讨论(0)
发布评论:

提交评论
- 加载中...
粉色の甜心

2020-12-29 02:18
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.
0 讨论(0)
发布评论:

提交评论
- 加载中...

灰色年华

2020-12-29 02:21

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>

0 讨论(0)

粉色の甜心

2020-12-29 02:22
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
- CSS Box Model visualization
- CSS3 UI: box-sizing property
- * { box-sizing: border-box } FTW
0 讨论(0)
发布评论:

提交评论
- 加载中...

Including margin for width and height

Useful references