Как избавиться от от пустого пространства между внешним и внутренним блоками?

Question

Google Chrome (возможно и другие браузеры тоже) при рендеринге такой разметки оставляет заметную незаполненную полосу в 1px между внешним блоком с рамкой и внутренним блоком с картинкой в качестве фона. Подскажите, как от неё избавиться?

.container{
    display: flex;
    border: 1px solid black;
    margin: 20px 0;
}

.picture{
    flex: 0 0 225px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-image: url('https://i.pinimg.com/originals/20/2e/2f/202e2fecd102336639761fb07dc600bc.jpg');
}

.text{
  margin: 6px;
}

<div class="container">
  <div class="picture"></div>
  <div class="text">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum iure, aliquam amet magni voluptate quo nulla odio minima blanditiis numquam consectetur adipisci pariatur exercitationem dolorem in ab repellat quibusdam deserunt!
  </div>
</div>

Answer 1

Добавить для всего body margin 0

body {
  margin: 0;
}
.container{
    display: flex;
    border: 1px solid black;
    margin: 20px 0;
}

.picture{
    flex: 0 0 225px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-image: url('https://i.pinimg.com/originals/20/2e/2f/202e2fecd102336639761fb07dc600bc.jpg');
}

.text{
  margin: 6px;
}

Answer 2

В данном случае, самый очевидный способ - отказаться от border и использовать box-shadow:

.container{
    display: flex;
    margin: 20px 0;
    box-shadow: 0 0 0 1px black;
}

.picture{
    flex: 0 0 225px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    background-image: url('https://i.pinimg.com/originals/20/2e/2f/202e2fecd102336639761fb07dc600bc.jpg');
}

.text{
  padding: 6px;
}

<div class="container">
  <div class="picture"></div>
  <div class="text">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum iure, aliquam amet magni voluptate quo nulla odio minima blanditiis numquam consectetur adipisci pariatur exercitationem dolorem in ab repellat quibusdam deserunt!
  </div>
</div>

БЛОГ НА HUSL

Как избавиться от от пустого пространства между внешним и внутренним блоками?

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