我正在進行第2周的最終處理項目，當我試圖在快速幫助指南的第7/19頁上的圖片周圍添加填充并保留其尺寸時，我遇到了困難。每當我添加填充時，圖像就會消失或變得太小。下面是給定的HTML和CSS代碼:

HTML:

<div class="services">
  <div class="service">
    <span class="span-img__container"><img src="shield.svg" class="service__img" alt=""></span>
    <span class="span__container">
      <h3 class="service__header">Secure</h3>
      <p class="service__description">We strictly only deal with vendors that provide top notch security.</p>
    </span>
  </div>

CSS:

.services {
  padding-top: 64px;
  display: flex;
  flex-wrap: wrap;
}

.service {
  display: flex;
  width: calc(100% / 3);
}

.service__header {
  font-size: 24px;
  font-weight: 700;
  padding-bottom: 16px;
}

.service__img {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 1px solid gray;
  padding: -20px; /* The issue is here */
  flex-shrink: 0;
}

.service__description {
  font-size: 16px;
  font-weight: 500;
  line-height: 2;
  color: rgb(124 139 161);
}

.span-img__container {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 45px;
}

.span__container {
  margin: 8px 0 0 16px;
}

在不影響圖像大小的情況下，如何添加填充？

在service__img類中，您可以簡單地添加框尺寸:border-box。這將確保填充添加到圖像的寬度和高度，并且圖像的大小不會增加。

希望有幫助！