我制作了一面法国国旗,并希望它与浏览器边缘保持相同的边距。容器的比例可能会改变。下图显示了我所做的。
只有顶部和左侧边距符合我的要求。我打算 margin: 0 0;
将间隙始终保持为 0;但右边和底部的不起作用。
那我能不能把所有的边距都平均设置一下呢?这是完整的代码。
#wrap {
/*I've tried to change this part*/
position: absolute;
width: 90%;
height: 90%;
/*height: 500px;*/
margin: 0 0;
border: 4px solid #000;
}
#wrap div {
width: 33.3333333333%;
height: 100%;
display: inline-block;
}
#wrap div:first-child {
margin-right: 33.3333333333%;
background: #003153;
}
#wrap div:first-child + div {
background: #cc3333;
}
<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<title>Document</title>
</head>
<body>
<div id="wrap">
<div></div>
<div></div>
</div>
</body>
</html>
浏览器默认为 body 设置边距,这是导致问题的原因。为 body
设置 margin:0
将 #wrap
中的宽度更改为 100%
body
{
margin:0;
}
#wrap{
position: absolute;
width:100%;
height:90%;
/*height: 500px;*/
margin: 0 0;
border:4px solid #000;}
我是一名优秀的程序员,十分优秀!