Как правильно сделать отступы у блоков?

Question

[TitNIk]

Доброго дня. Задался вопросом, как правильно сделать отступы, как на скриншоте? Блоки будут добавляться, как новости через WP, поэтому, разделить блоки на left и right не подходит (наверное). Не выходит сделать так, как на скриншоте. Нужны отступы по центру, но, чтобы справа их не было. Может кто подскажет, как можно добиться этого? Заранее спасибо!

Answer 1

[Алексей Скляров]

Создаете контейнер:

.container{
    margin-left:-15px;
    margin-right:-15px;
}

Оборачиваете каждый блок, например:

.block {
 padding:15px;
}

Только не забываем про:

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
:after,:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

Чтоб было проще понять, почитайте о Bootstrap.

Comments

[TitNIk]

Думал о подобном методе, только что-то тупил, не знал как сделать )) Спасибо, все работает ))

Answer 2

[Владислав Бойченко]

Если у вас такой тип цикла:

<div class="news">
   начало цикла
  <div class="news-item">
    ....
  </div>
  конец цикла
</div>

То пишите в стилях:

.news .news-item{определяете все, что вам нужно и отступы справа}
.news .news-item:nth-child(even){margin-right: 0;}

Answer 3

[Максим Тимофеев]

либо flex либо li с float:left; display:inline-block; width:40%; margin:5%;
Но лучше использовать готовый grid типа: getbootstrap.com/css/#grid-options