努力精确地计算高度和边距

Question

您好，我目前正在使用一个完美的正方形和矩形的网站。这些需要完全适合移动设备和笔记本电脑的屏幕，平板电脑等。因此，我现在想确切地控制每个元素占用多少空间。

我的问题：这是淡蓝色，这些div占用了宽度的50％，高度占100％。接下来，我将紫色div的高度设置为60％，边距为10％（即70％），然后将高度div的高度设置为30％，这将使总数达到100％。正如您在示例中看到的那样，它所占的百分比不是100％，而是更多。

我已经冲一下，该余量是从父div计算出来的（所以我想是浅蓝色的div），所以我需要改变我的思维计算方式，但是现在不知道该怎么做。有人可以帮助我吗？

.toegelatenDagWeek {
	float: left;
	background-color: yellow;
}

.verhoudingTijd {
	float: right;
	background-color: red;

}

.extraTijdDagWeek {
	float: right;
	background-color: silver;
}


.square-box{
    position: relative;
    width: 50%;
    overflow: hidden;
}
.square-box:before{
    content: "";
    display: block;
    padding-top: 50%;
}

.square-content{
    position:  absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    color: white;
    text-align: center;
    margin: 1%;
}

.vierkanttt{
  width: 35%;
	float:left;
	text-align:center;
	margin-left: 37.5%;
	margin-right: 37.5%;
	margin-top: 1%;
	margin-bottom: 2%;
	position: relative;
	
}

.vierkanttt-marges {
	  flex: 1;
	  margin: 1px 1px 1px 1px;
	  position: relative;	  
}




.inputTimeSmall {
	background-color: #b721ff;
	border: none;
	border-radius: 0.5em;
	padding: 15% 0% 20% 0%;
	width:100%;
	text-align:center;
	font-size:0.8em;	
}

input {
    color: white;
}

.inputTimeSmall::placeholder { 
    color: white;
}

.inputTime:focus {
    outline: none;
}


.inputTime {
	background-color: #b721ff;
	border: none;
	border-radius: 0.5em;
	padding: 15% 0% 20% 0%;
	width:100%;
	text-align:center;
	font-size:4em;
	color: white;
	
}

.gespeeldeTijdTitel {
	color: white;
	width: 100%;
	padding-left: 5%;
	float: left;
	text-align: left;
	text-decoration-line: underline;
	//background: purple;
	font-size: 1.5em;
	padding-bottom: 3%;
	padding-top: 3%;
	background-color: blue;
}


.toegelatenTijdTitel {
  background: blue;
  height: 30%;
  width: 100%;
  position: relative;
}

.toegelatenTijdTitel div {
  position: absolute;
  top: 50%;
  color: white;
  text-decoration-line: underline;
  transform: translateY(-50%);
  margin-left: 5%;
  font-size: 1.5em;
}

.testje {
	width: 100%;
	height: 70%;
	background-color: black;	
}

.spaceInputTimeSmall {
	background-color: #21d4fd;
	border-radius: 0.5em;
	float:left;
	width: 50%;
	height: 100%;	
}

.inputTimeMini {
	width: 80%;
	background-color: #b721ff;
	font-size:2em;
	height: 60%;
	margin-top: 10%;
	margin-left: 10%;
	margin-right: 10%;	
	border-radius: 0.5em;
	display: table;	
}




.textBoxSmall {
	height: 30%;
	width: 80%;
	background-color: green;
	margin: 00% 10% 0% 10%;
	vertical-align: center;
	display: table;	
}

.centerText {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

.boxtienprocent {
	background-color: grey;
}

#container {
  width: 90%;
  height: 90%;
  margin: 5%;
  position: relative;
  color: white;
}

<div class="square-box toegelatenDagWeek">
					<div class='square-content '>
						<div class="toegelatenTijdTitel">  
						  <div>
							toegelaten tijd
						  </div>					  
						</div>
						
						<div class="testje">
							
							<div class="spaceInputTimeSmall">
								<div class="boxtienprocent"></div>
								<!--<input type="text" class="inputTimeSmall" id="inputHoursMaandag" name="maandagUren" placeholder="00" maxlength="3">-->
								<div class="inputTimeMini" name="uren" id="DisplayToegelatenHours" ><div class="centerText">05</div></div>
								<div class="textBoxSmall"><div class="centerText">uren</div></div>
							</div>
							<div class="spaceInputTimeSmall">
								<!--<input type="text" class="inputTimeSmall" id="inputMinutesMaandag" name="maandagMinuten" placeholder="00" maxlength="2">-->
								<div class="inputTimeMini" name="uren" id="DisplayToegelatenMinutes" ><div class="centerText">05</div></div>
								<div class="textBoxSmall"><div class="centerText">minuten</div></div>
							</div>
						</div>	
					</div>	
				</div>	

Answer 1

而不是空白，您需要使用填充，因为填充是内容和边框之间的空间，而空白是边框之外的空间。在您的示例中，您使用了边距，因此将矩形向外推。