html - 边界延伸过去图像？

Question

我刚刚开始重新接触 CSS/HTML(大约一个小时前)，但遇到了一个问题。我正在尝试将这些显示设置为内联样式，但边框似乎远远超出了图像，这反过来又不允许它们按照我的意愿显示。

感谢您的帮助!

这是我的 JSfiddle:https://jsfiddle.net/pghfekj6/

HTML

<div class="gallery">
      <figure class="gallery-item">
        <img width="50%" height="50%" src="http://66.media.tumblr.com/7a79ee78891996bee770ce47c1f70397/tumblr_o6ajskjBmD1uinem1o1_1280.jpg">
      </figure>

      <figure class="gallery-item">
        <img width="50%" height="50%" src="http://67.media.tumblr.com/830d7bf137d8ccac31897d45d985a531/tumblr_o2zapjWK2F1tb4uw5o7_500.jpg">
      </figure>
</div>

CSS

body {
  font-family: 'Lato', sans-serif;
  font-weight: 100;
  color: lightgrey;
}

h1 {
  margin: 20px;
}

.gallery {
  display: inline;
}

.gallery-item {
  margin: 20px;
  border: 5px solid red;
}

Answer 1

您没有将边框应用于图像，而是应用于它们的容器(图形)，默认情况下它是 block 级元素。也就是说，它横跨页面的宽度。

.gallery-item img {
    border: 5px solid red;
}