struggling with exact calculation of heights and margins - html

Question

I'm currently working on a website where I work with perfect squares and rectangles. These need to perfectly fit on mobile devices and laptop screens, tablets and so on. Therefore I want exactly now and be in control how much space every element is taking.
My problem: it goes about the light blue color, these div is taking 50% of the width and a height of 100%. Next I set the purple div to a height of 60% with a margin on top of 10% (so 70%), then I have the green div with a height of 30% which will bring the total to 100%. As you see in the example it isn't taking 100% but more than that.
I've red that the margin is calculated from the parent div (so the light-blue div I suppose), so I need to change my way of thinking-calculating I suppose but don't know how. Someone who can help me out?
.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

Instead of margins, you need to use padding, because padding is the space between the content and the border, meanwhile margin is the space outside the border. In your example, you used margins, so it pushed the rectangular outside.