Последнее испытание

Курсы §10. Блочная модель документа
1 
 Как можно упростить код?
   
/* Базовые стили, изменять не нужно */
    html,
    body {
      margin: 0;
      padding: 0;
    }

    body {
      width: 520px;
      min-height: 270px;
      padding: 20px;

      font-size: 14px;
      line-height: 1.5;
      font-family: "Arial", sans-serif;
      color: white;

      background-color: #3a78a1;
      background-image: url("grid.png");
      background-repeat: repeat;
      background-position: -80px -80px;
    }

    /* Cтили, которые можно изменять */
    .column {
      margin-bottom: 10px;
      padding: 10px;

      background-color: rgba(0, 255, 255, 0.2);
      border: 2px solid white;
      display:inline-block;
      vertical-align:top;
      margin-right:10px;
      width:77px;
    }

    .cell {
      padding: 5px 10px;

      background-color: rgba(0, 255, 255, 0.2);
      border: 1px solid white;
      
    }
    .table{
    display:table;
    border: 1px solid white;
    }
    .row{
    display:table-row;  
    }
    .cell{
    display:table-cell;  
    }
    .col-3{
    display:none;  
    }
    .col-1,
    .col-2 {
    width:96px;  
    }
2

Из двух правил для .cell сделайте одно, и туда же перенесите ширину ячеек.
После этого правило для .col-1, .col-2 можно убрать.

Ширина для .column должна быть не 77px, а 76px.

1 лайк