老师想请问下为什么我这样写的two盒子不在中间呢

<style>

* {

padding: 0;

margin: 0;

}

.one {

height: 400px;

width: 400px;

padding: 100px;

margin: 40px auto;

border: 1px solid #000;

}

.two {

height: 300px;

width: 300px;

border: 1px solid #000;

}

</style>

</head>

<body>

</div>

</body>

内边距变100了不就是正好的吗

慕仙0240544 2022-06-14

源自：浮动与定位 3-3 绝对定位（1）

收起

1回答

好帮手慕小李 2022-06-14 13:51:55

同学你好，one盒子宽度是400高度是400，内边距上下左右都设置100，那么two盒子宽度是300高度是300，那么它跟父盒子相比较宽高就少了100像素，并且two盒子在one盒子内，那么呈现出two盒子排列在左侧，那么它的宽度与高度都缺少100，这样会变成同学所提到的情况，同学这里将two盒子宽高都改成400，就可以了。

同学自己试试，祝学习愉快！

收起回答

提问者慕仙0240544 #1

老师因为有border不是应该是399吗 400就超出了会有什么影响吗

2022-06-14 17:38:38
好帮手慕小李回复提问者慕仙0240544 #2

同学你好，严格的说它的宽高应设置为398px，因为它还有1像素边框，那么左右各1像素这样相当于是2像素，在加上398px则正好400像素，那么two就会完全充满one父级了。如下：
two设置宽高为399如下：
则不会有一像素的问题。
另外同学要写的two盒子宽高300像素，要居中显示只需要给padding:50px就可以了。如下：
祝学习愉快！

2022-06-14 18:25:23
提问者慕仙0240544 回复好帮手慕小李 #3

<style>
* {
padding: 0;
margin: 0;
}
.one {
height: 400px;
width: 400px;
padding: 100px;
margin: 40px auto;
border: 1px solid #000;
}
.two {
height: 299px;
width: 299px;
margin: 100px;
border: 1px solid #000;

}
/* .three {
height: 298px;
width: 298px;
border: 1px solid #000;
margin: 100px;
} */
</style>
</head>
<body>
<div class="one">
<div class="two">
<div class="three"></div>
</div>
</div>
</body>
老师我想请问下这个div2为什么是这样显示的 margin：100不是四个面都是100吗

2022-06-14 20:29:25