CSS Calc Function

Understanding The CSS Calc() Function

by MorganMeliment

HTML

<div id = "parentdiv">
    <div class = "childdiv"></div>
    <div class = "childdiv"></div>
    <div class = "childdiv"></div>
    <div class = "childdiv"></div>
</div>

CSS

#parentdiv {
    width: 100%;
    height: 60px;
    background-color: #4679bd;
}
.childdiv {
    display: inline-block;
    height: 30px;
    width: 30px;
    border-radius: 15px;
    background-color: white;
    float: left;
    margin-top: 15px;
    margin-left: calc(20% - 24px);
}