نموذج الصندوق Box-Model

نتيجة التنفيذ

Html

  <div class="c1">1</div>

  <div class="c2">2</div>

  <div class="c3">3</div>

  <div class="c4">4</div>

  <div class="c5">5</div>

  <div class="c6">6</div>

  <div class="c7">7</div>

Css

div {

    font-size: 120px;

    text-align: center;

    border: 5px solid white;

    color: white; 

    background: linear-gradient(to bottom, #de6161, #2657eb);

    }

.c2,.c3 {

    float: left;

    width: calc(50% - 10px);

        }

.c4 {

    clear: both;

    }

.c4,.c5,.c6 {

    float: left;

    width: calc(100% / 3 - 10px);

            }

.c7 {

    clear: both;

    }