1

.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?

1
  • Используйте display: grid для такой задачи он отлично подходит, в интернете очень много примеров его использования.
    – IDev
    Commented 28 февр. 2020 в 15:37

2 ответа 2

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>

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;
}
2
  • а как сделать тоже самое, но через отступы (чтобы width у блока был 50%)? Насколько я знаю, можно как-то через отступы уменьшить размер блока, не изменяя его в коде (надеюсь, я все сказал правильно) Commented 28 февр. 2020 в 15:56
  • Тогда так .Main { background-color: salmon; height: 1000px; margin: 25px auto; width: 80%; display: flex; } .Block { height: 500px; width: 50%; } .Titles { background-color: chartreuse; margin-right: 10px; } .News { background-color: indigo; } Commented 29 февр. 2020 в 8:35

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.