БЛОГ НА HUSL


Межблочные отступы и отступы от краев экрана

Автор вопроса: wfamilyweb

Верстаю фигмовский макет Webovio. Интересует верстка блока 04 Services

Servicesblock

Изображение из этого блока

введите сюда описание изображения

Есть код этого блока

.page__company-articles {}

.company-articles {}

.company-articles__container {}

.articles__block_container {
  max-width: 1140px;
  /*margin: 0 auto;*/
  margin: 0 -100px;
  /*position: absolute;
  left: 0;
  right: 0;*/
  /*top: 0;*/
}

.article__and__comment {
  color: rgba(33, 56, 66, 0.6);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  /*margin-left: calc(165/1441*100vw);*/
  /*166/1441*100vw*/
  /*margin-right: calc(166/1441*100vw);*/
  /*166/1441*100vw*/
}

.main-article {
  flex: 0 1 50%;
  /*padding-right: 100px;*/
  padding: 0px 100px;
}

.article__first-note {
  margin-top: 120px;
  /*120*/
  /*margin-left: 166px;*/
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 21px;
  color: rgba(77, 83, 60, 0.9);
}

.article__title {
  color: #4D533C;
  margin-top: calc(29px);
  /*margin-left: 166px;*/
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-size: 36px;
  line-height: 46px;
}

.article__text {
  margin-top: calc(35px);
  /*margin-left: 166px;*/
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  color: rgba(33, 56, 66, 0.6);
}

.article__second-note {
  margin-top: calc(42px);
  /*margin-left: 166px;*/
  font-family: 'FontAwesome';
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 18px;
  text-decoration-line: underline;
  color: #D4D6D4;
}

.comment {
  flex: 0 1 50%;
  /*padding-left: 100px;*/
  box-shadow: 20px 25px 43px rgba(0, 0, 0, 0.18);
  padding: 0px 100px;
}

.comment__text {
  margin-top: calc(120px);
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 400;
  font-size: 24px;
  line-height: 40px;
  /* or 167% */
  color: #4D533C;
}

.icon__and__label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-top: calc(50px);
}

.comment__icon {
  /*margin-left: calc(40px);*/
}

.label {
  margin-top: calc(-50px);
  /*14px*/
  margin-left: calc(30px);
}

.comment__author {
  color: #4D533C;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-size: 22px;
  line-height: 33px;
  /* identical to box height */
  color: #4D533C;
}

.comment__author-position {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  /* identical to box height */
  color: #152934;
  padding-top: calc(6px);
}

@media (max-width: 1242px) {
  .main-article,
  .comment {
    flex: 0 1 100%;
    text-align: center;
    padding-left: 0px;
    padding-right: 0px;
  }
}
<section class="page__company-articles company-articles">
  <div class="company-articles__container articles__block_container">
    <div class="article__and__comment">
      <article class="main-article">
        <div class="article__first-note">What we do for you</div>
        <div class="article__title">Strategy. Design Content. Technology Development </div>
        <div class="article__text">There’s no secret sauce, no wizard behind the curtain. What makes Aerolab tick is an interdisciplinary team with a framework that fosters candid collaboration.</div>
        <div class="article__second-note">More know About us</div>
      </article>
      <article class="comment">
        <div class="comment__text">With More than 10 Years of Knowledge and Expertise we Design and Code Websites and Apps, We Build Brands and Help Them Succeed</div>
        <div class="icon__and__label">
          <div class="comment__icon">
            <img src="https://i.stack.imgur.com/NAeUC.png" alt="author">
          </div>
          <div class="label">
            <div class="comment__author">Genevieve Rodriquez</div>
            <div class="comment__author-position">Founder & CEO, Webovio</div>
          </div>
        </div>
      </article>
    </div>
  </div>
</section>

Подскажите как сделать так, чтобы в полноэкранном режиме приведенный здесь блок выглядел так, как на макете в одну строчку с сохранением значения свойства flex-wrap. Блоки с классами main_article и comment должны стать в одну строчку с некоторыми отступами между ними и с некоторыми отступами от краев экрана. Линия выше с логотипами компаний не интересует, её верстать не надо. Очень нужно, помогите, я новичок.


Источник

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

Автор решения: Vladimir Gonchar

flex-basis (или третья цифра в свойстве flex) не учитывает отступы в этом же блоке. Просто отнимаете отступы, и всё будет как надо. Или не пытайтесь добавлять отступы в обертке, а добавляйте в дочернем блоке.

Для первого варианта вычисляйте через calc: flex: 0 1 calc(50% - 200px), 200px - это 2 отступа по 100px слева и справа.

Отступы не делайте через margin для обертки, тем более отрицательные, если собираетесь в адаптивность.

.page__company-articles {}

.company-articles {}

.company-articles__container {}

.articles__block_container {
  max-width: 1140px;
  margin: 0 auto;
  /* margin: 0 -100px; */
  /* Так не надо! */
  padding-left: 15px;
  padding-right: 15px;
  /*position: absolute;
  left: 0;
  right: 0;*/
  /*top: 0;*/
}

.article__and__comment {
  color: rgba(33, 56, 66, 0.6);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  /*margin-left: calc(165/1441*100vw);*/
  /*166/1441*100vw*/
  /*margin-right: calc(166/1441*100vw);*/
  /*166/1441*100vw*/
}

.main-article {
  flex: 0 1 calc(50% - 200px);
  /*padding-right: 100px;*/
  padding: 0px 100px;
}

.article__first-note {
  margin-top: 120px;
  /*120*/
  /*margin-left: 166px;*/
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 21px;
  color: rgba(77, 83, 60, 0.9);
}

.article__title {
  color: #4D533C;
  margin-top: calc(29px);
  /*margin-left: 166px;*/
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-size: 36px;
  line-height: 46px;
}

.article__text {
  margin-top: calc(35px);
  /*margin-left: 166px;*/
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  color: rgba(33, 56, 66, 0.6);
}

.article__second-note {
  margin-top: calc(42px);
  /*margin-left: 166px;*/
  font-family: 'FontAwesome';
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 18px;
  text-decoration-line: underline;
  color: #D4D6D4;
}

.comment {
  flex: 0 1 calc(50% - 200px);
  /*padding-left: 100px;*/
  box-shadow: 20px 25px 43px rgba(0, 0, 0, 0.18);
  /* padding: 0px 100px; */
  padding: 70px 100px 60px;
}

.comment__text {
  /* margin-top: calc(120px); */
  /* Так не надо, лучше сделать отступы в обертке */
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 400;
  font-size: 24px;
  line-height: 40px;
  /* or 167% */
  color: #4D533C;
}

.icon__and__label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-top: calc(50px);
}

.comment__icon {
  /*margin-left: calc(40px);*/
}

.label {
  margin-top: calc(-50px);
  /*14px*/
  margin-left: calc(30px);
}

.comment__author {
  color: #4D533C;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-size: 22px;
  line-height: 33px;
  /* identical to box height */
  color: #4D533C;
}

.comment__author-position {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  /* identical to box height */
  color: #152934;
  padding-top: calc(6px);
}

@media (max-width: 1242px) {
  .main-article,
  .comment {
    flex: 0 1 100%;
    text-align: center;
    padding-left: 0px;
    padding-right: 0px;
  }
}
<section class="page__company-articles company-articles">
  <div class="company-articles__container articles__block_container">
    <div class="article__and__comment">
      <article class="main-article">
        <div class="article__first-note">What we do for you</div>
        <div class="article__title">Strategy. Design Content. Technology Development </div>
        <div class="article__text">There’s no secret sauce, no wizard behind the curtain. What makes Aerolab tick is an interdisciplinary team with a framework that fosters candid collaboration.</div>
        <div class="article__second-note">More know About us</div>
      </article>
      <article class="comment">
        <div class="comment__text">With More than 10 Years of Knowledge and Expertise we Design and Code Websites and Apps, We Build Brands and Help Them Succeed</div>
        <div class="icon__and__label">
          <div class="comment__icon">
            <img src="https://i.stack.imgur.com/NAeUC.png" alt="author">
          </div>
          <div class="label">
            <div class="comment__author">Genevieve Rodriquez</div>
            <div class="comment__author-position">Founder & CEO, Webovio</div>
          </div>
        </div>
      </article>
    </div>
  </div>
</section>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.