gpt4 book ai didi

html - 父div和子div之间的空间?

转载 作者:行者123 更新时间:2023-11-28 12:30:24 24 4
gpt4 key购买 nike

代码:

HTML

<body>
<div class="wrap">
<div class="box">???</div>
</div>
</body>

CSS

.wrap {
background-color: #0000FF;
display: block;
height: 600px;
margin: 0px auto;
padding: 0px;
width: 600px;
}

.box {
border: solid 20px #FF0000;
color: #FFFFFF;
display: block;
height: 100%;
padding: 0px;
margin: 0px;
text-align: center;
width: 100%;
}

JSFiddle:
http://jsfiddle.net/5k0ddtdn/4/

考虑到这不是 border-box,我希望红色边框完全环绕蓝色父 div。

为什么它不这样做?

最佳答案

添加 box-sizing: border-box;.box

.box {box-sizing: border-box;}

http://jsfiddle.net/5k0ddtdn/8/

在您的代码中,内部元素的宽度为 600px + 40px 边框,父元素(.wrap 总共有 640px)。您需要更改 box-model,或为内部元素设置正确的大小 (width: 560px; height: 560px;)。您可以删除内部元素的 width 并仅设置 height: 560px;

http://jsfiddle.net/5k0ddtdn/10/

关于html - 父div和子div之间的空间?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28760377/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com