Html - CSS Border-box issue, How can I explain this?

JohnnyMor
December 9, 2024
54 views
0 votes
2 Answers

https://codepen.io/Eugene-73/pen/mybEbMW

body {
  display: flex;
}

.section {
  width: 1260px;
}

.speakers {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.speaker {
  width: 418px;
  /* Если поставить 420px то 3 столбец съедет вниз, почему так??? Эти 2 пикселя от бордера, почему эти пискели не входят в 420px????*/
  box-sizing: border-box;
  /* Почему не работает????*/
  display: block;
}

<section class="section">
  <h2 class="section-title">Наши эксперты</h2>
  <div class="speakers">

    <div class="speaker">
      <img src="https://netology-code.github.io/html-2-homeworks/block-elements-positioning/our-experts-section/img/6211.jpg" class="speaker-photo" alt>
      <span class="speaker-name">Татьяна Тен</span>
    </div>

    <div class="speaker">
      <img src="https://netology-code.github.io/html-2-homeworks/block-elements-positioning/our-experts-section/img/18702.jpeg" class="speaker-photo" alt>
      <span class="speaker-name">Денис Ежков</span>
    </div>

    <div class="speaker">
      <img src="https://netology-code.github.io/html-2-homeworks/block-elements-positioning/our-experts-section/img/18292.jpeg" class="speaker-photo" alt>
      <span class="speaker-name">Андрей Батусов</span>
    </div>

    <div class="speaker">
      <img src="https://netology-code.github.io/html-2-homeworks/block-elements-positioning/our-experts-section/img/16689.jpeg" class="speaker-photo" alt>
      <span class="speaker-name">Александр Беспоясов</span>
    </div>

    <div class="speaker">
      <img src="https://netology-code.github.io/html-2-homeworks/block-elements-positioning/our-experts-section/img/9998.jpeg" class="speaker-photo" alt>
      <span class="speaker-name">Константин Фокин</span>
    </div>

    <div class="speaker">
      <img src="https://netology-code.github.io/html-2-homeworks/block-elements-positioning/our-experts-section/img/19697.jpeg" class="speaker-photo" alt>
      <span class="speaker-name">Виталий Гусаров</span>
    </div>
  </div>
</section>

The problem is that box-sizing: border-box does not work; and the blocks shift down if you set the width to 420px

If you set the width to 420px, the blocks shift downwards, Why is that??

How can this be explained?

Tags: css html

Answers

Actually, you can explain this issue as box-sizing: border-box not working.

The solution you’re seeking is as follows.

You need to add following piece of code.

* {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
}

.section {
  width: 1260px;
}

.speakers {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.speaker {
  width: 418px;
  /* Если поставить 420px то 3 столбец съедет вниз, почему так??? Эти 2 пикселя от бордера, почему эти пискели не входят в 420px????*/
  box-sizing: border-box;
  /* Почему не работает????*/
  display: block;
}

.speaker:nth-child(even) {
  background-color: #f0f1fb;
}

.speaker:nth-child(4n) {
  border: 3px solid #d9dbf5;
}

<section class="section">
  <h2 class="section-title">Наши эксперты</h2>
  <div class="speakers">

    <div class="speaker">
      <img src="https://netology-code.github.io/html-2-homeworks/block-elements-positioning/our-experts-section/img/6211.jpg" class="speaker-photo" alt>
      <span class="speaker-name">Татьяна Тен</span>
    </div>

    <div class="speaker">
      <img src="https://netology-code.github.io/html-2-homeworks/block-elements-positioning/our-experts-section/img/18702.jpeg" class="speaker-photo" alt>
      <span class="speaker-name">Денис Ежков</span>
    </div>

    <div class="speaker">
      <img src="https://netology-code.github.io/html-2-homeworks/block-elements-positioning/our-experts-section/img/18292.jpeg" class="speaker-photo" alt>
      <span class="speaker-name">Андрей Батусов</span>
    </div>

    <div class="speaker">
      <img src="https://netology-code.github.io/html-2-homeworks/block-elements-positioning/our-experts-section/img/16689.jpeg" class="speaker-photo" alt>
      <span class="speaker-name">Александр Беспоясов</span>
    </div>

    <div class="speaker">
      <img src="https://netology-code.github.io/html-2-homeworks/block-elements-positioning/our-experts-section/img/9998.jpeg" class="speaker-photo" alt>
      <span class="speaker-name">Константин Фокин</span>
    </div>

    <div class="speaker">
      <img src="https://netology-code.github.io/html-2-homeworks/block-elements-positioning/our-experts-section/img/19697.jpeg" class="speaker-photo" alt>
      <span class="speaker-name">Виталий Гусаров</span>
    </div>
  </div>
</section>

Found something through digging around in webtools:

Your containter .speakers itself isn’t wide enough, as it’s border takes 6px from it.

I tried to add box-sizing:border-box to .speakers, but it didn’t fix it (probably because of the flexbox).

This workaround should get the job done:

.speakers { width: 1266px; } /* 6px of width reserved for border, 3px from each side */

preview (open it full page):

body { display: flex; }
.section { width: 1266px; }
.speakers { display: flex; flex-wrap: wrap; justify-content: center; }
.speaker { width: 420px; box-sizing: border-box; display: block; margin: 0; }
.speaker:nth-child(even) { background-color: #f0f1fb; }
.speaker:nth-child(4n) { border: none; border: 3px solid #d9dbf5; }

  <link rel="stylesheet" href="https://netology-code.github.io/html-2-homeworks/block-elements-positioning/our-experts-section/css/styles.css">
  
<section class="section">
  <h2 class="section-title">Наши эксперты</h2>
  <div class="speakers">
    <div class="speaker">
      <img
        src="https://netology-code.github.io/html-2-homeworks/block-elements-positioning/our-experts-section/img/6211.jpg"
        class="speaker-photo" alt>
      <span class="speaker-name">Татьяна Тен</span>
    </div>
    <div class="speaker">
      <img
        src="https://netology-code.github.io/html-2-homeworks/block-elements-positioning/our-experts-section/img/18702.jpeg"
        class="speaker-photo" alt>
      <span class="speaker-name">Денис Ежков</span>
    </div>
    <div class="speaker">
      <img
        src="https://netology-code.github.io/html-2-homeworks/block-elements-positioning/our-experts-section/img/18292.jpeg"
        class="speaker-photo" alt>
      <span class="speaker-name">Андрей Батусов</span>
    </div>
    <div class="speaker">
      <img
        src="https://netology-code.github.io/html-2-homeworks/block-elements-positioning/our-experts-section/img/16689.jpeg"
        class="speaker-photo" alt>
      <span class="speaker-name">Александр Беспоясов</span>
    </div>
    <div class="speaker">
      <img
        src="https://netology-code.github.io/html-2-homeworks/block-elements-positioning/our-experts-section/img/9998.jpeg"
        class="speaker-photo" alt>
      <span class="speaker-name">Константин Фокин</span>
    </div>
    <div class="speaker">
      <img
        src="https://netology-code.github.io/html-2-homeworks/block-elements-positioning/our-experts-section/img/19697.jpeg"
        class="speaker-photo" alt>
      <span class="speaker-name">Виталий Гусаров</span>
    </div>
  </div>
</section>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – CSS Border-box issue, How can I explain this?

Answers