Почему появляются белые отступы у картинки и кнопки?

Question

[andrey_chirkin]

Здравствуйте. Я написать абстрактную карточку товара на html и css, добавил border ко всем элементам. Не могу понять почему есть белые просветы рядом с картинкой и кнопкой? (Код и фото прилагаю)

HTML:

<div class="card">
    <div class="picture">
        <img
                src="https://avatars.mds.yandex.net/get-pdb/992060/df717282-b814-46ad-a41b-ce95b6d5aa1f/s1200?=false"
                alt="Picture"
        >
    </div>
    <div class="description">
        <h1>
            Picture
        </h1>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi assumenda autem culpa dolorum eligendi, eos
            eum eveniet illum itaque, nihil officia perspiciatis possimus, quibusdam sapiente sint sit soluta ut
            voluptas.
        </p>
    </div>
    <div class="button">
        <button>
            Open
        </button>
    </div>
</div>

CSS:

.card {
    width: 20%;
    border: 5px solid dodgerblue;
    margin: 20px 0;
}

.card .picture, .description, .button{
    border: 5px solid darkblue;
}

.picture img {
    width: 100%;
    height: 100%;
}

Comments

[Ankhena]

Масштаб 100% сделайте в браузере )))

На будущее, делайте песочницу в сервисах типа jsfiddle.net или аналогах, так, чтобы вашу проблему можно было увижеть.