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

Question

[Justin Bieber]

прошел все уроки htmlacademy, но так и не понял, как правильно верстать отступы, как сделать чтоб 4 новости не перешагивали на след линию и были в одной строке?

Answer 1

[Anton Filippov]

на блоки

display: inline-block
margin: 5px

а лучше на родителя

display: flex
justify-content: space-around

Answer 2

[Виктор]

1) подобрать их размер с учётом отступов
2)

<div class="content-4-blocks">
 <div class="content-block"></div>
 <div class="content-block"></div>
 <div class="content-block"></div>
 <div class="content-block"></div>
</div>

3) для content-block ставим margin по бокам и display: inline-block;

Comments

[Justin Bieber]

в каком случае inline block может игнорироваться?

Answer 3

[Андрей]

Эти 4 новости оборачиваете в контейнер с отрицательным margin равным половине расстояния между новостями.
например так https://jsfiddle.net/dxh8wf86/

Comments

[Justin Bieber]

поставил margin: 0px -10px; и все стало на свои места, чудо какое-то, это правильно, и что если верстка будет адаптивная?

[Андрей]

Justin Bieber: отрицательным margin вы компенсируете отступы у крайних элементов. это нормальная практика с древних времен, на адаптивность не влияет

Answer 4

[Михаил Лялин]

1/ сформулировать надо было, что вопрос в центрировании, а не в отступах
2/ frontender.info/centering-css-complete-guide

Answer 5

[Justin Bieber]

а правильно ли будет использовать такой метод, например у последнего блока из четырех

.news6:last-child {
margin-right: -40px;
}

тогда как у основных

.news6 {
display: block;
padding: 0px 0px;
text-decoration: none;
width: 24.5%;
float: left;
position: relative;
margin-right: 14px;
}

Comments

[ThemeZV]

Лучше использовать flex-box, а не float

[Justin Bieber]

для чего, в чем разница?