Блочная верстка (отступы)

Question

.Main {
  background-color: salmon;
  height: 1000px;
  margin: 25px auto;
  width: 80%;
}

.Block {
  height: 500px;
  width: 49.1%;
}

.Titles {
  background-color: chartreuse;
  float: left;
}

.News {
  background-color: indigo;
  float: right;
}

<div class="Main">
  <div class="Titles Block">Titles</div>
  <div class="News Block">Tews</div>
</div>

Я хотел бы узнать, как нормально сделать отступы от блоков внутри еще одного блока (Main). Я их сделал благодаря сокращению длинны у блоков (width:49.1%). Допустим, width:50%. Как нормально сделать отступы и при этом не переходя за границы блока Main?

Answer 1

.Main {
  background-color: salmon;
  height: 1000px;
  margin: 25px auto;
  width: 80%;
}

.Block {
  height: 500px;
  width: calc(50% - 5px); // Лайфхак часто использую
}

.Titles {
  background-color: chartreuse;
  float: left;
}

.News {
  background-color: indigo;
  float: right;
}

Answer 2

Можно и отступы делать также в процентах. Всё очень просто. Например, так:

.Main {
  background-color: salmon;
  height: 1000px;
  margin: 25px auto;
  width: 80%;
  padding: 2%;
}

.Block {
  width: 46%;
  height: 500px;
  margin: 2%;
}

.Titles {
  background-color: chartreuse;
  float: left;
}

.News {
  background-color: indigo;
  float: right;
}

<div class="Main">
  <div class="Titles Block">Titles</div>
  <div class="News Block">Tews</div>
</div>

БЛОГ НА HUSL

Блочная верстка (отступы)

Ответы (2 шт):