将图像添加到CSS多列布局内的元素会产生垂直间隙

Question

我根据此blogpost进行了多列布局。元素之间的垂直间隙相等。但是，一旦我在元素内添加图像，这些间隙就会变得混乱，如下所示（第1部分）。我很想知道为什么会这样以及如何解决问题。

注意：图像应保持响应状态，即，如果调整了视口的大小，因此列数和cloumn-width发生了变化，则图像应填满环绕DIV的宽度并自动调整其高度。

body {
  margin: 0;
  padding: 1rem;
}

.masonry-with-columns {
  columns: 6 200px;
  column-gap: 1rem;
}

.masonry-with-columns div {
  width: 150px;
  background: #EC985A;
  color: white;
  margin: 0 1rem 1rem 0;
  display: inline-block;
  width: 100%;
  text-align: center;
  font-family: system-ui;
  font-weight: 900;
  font-size: 2rem;
}

img {
  display: inline;
  width: calc(100% - 1rem);
  border-radius: 0.5rem;
  margin: 0.5rem;
  box-sizing: border-box;
}

.masonry-with-columns div:nth-child(1) {
  height: 307px;
  line-height: 307px;
}

.masonry-with-columns div:nth-child(2) {
  height: 432px;
  line-height: 432px;
}

.masonry-with-columns div:nth-child(3) {
  height: 132px;
  line-height: 132px;
}

.masonry-with-columns div:nth-child(4) {
  height: 428px;
  line-height: 428px;
}

.masonry-with-columns div:nth-child(5) {
  height: 332px;
  line-height: 332px;
}


.masonry-with-columns div:nth-child(6) {
  height: 373px;
  line-height: 373px;
}

.masonry-with-columns div:nth-child(7) {
  height: 207px;
  line-height: 207px;
}

.masonry-with-columns div:nth-child(8) {
  height: 315px;
  line-height: 315px;
}

.masonry-with-columns div:nth-child(9) {
  height: 462px;
  line-height: 462px;
}

.masonry-with-columns div:nth-child(10) {
  height: 440px;
  line-height: 440px;
}

.masonry-with-columns div:nth-child(11) {
  height: 177px;
  line-height: 177px;
}

.masonry-with-columns div:nth-child(12) {
  height: 220px;
  line-height: 220px;
}

.masonry-with-columns div:nth-child(13) {
  height: 162px;
  line-height: 162px;
}

.masonry-with-columns div:nth-child(14) {
  height: 439px;
  line-height: 439px;
}

.masonry-with-columns div:nth-child(15) {
  height: 307px;
  line-height: 307px;
}

.masonry-with-columns div:nth-child(16) {
  height: 425px;
  line-height: 425px;
}

.masonry-with-columns div:nth-child(17) {
  height: 439px;
  line-height: 439px;
}

.masonry-with-columns div:nth-child(18) {
  height: 210px;
  line-height: 210px;
}

.masonry-with-columns div:nth-child(19) {
  height: 438px;
  line-height: 438px;
}

.masonry-with-columns div:nth-child(20) {
  height: 138px;
  line-height: 138px;
}

.masonry-with-columns div:nth-child(21) {
  height: 415px;
  line-height: 415px;
}

.masonry-with-columns div:nth-child(22) {
  height: 246px;
  line-height: 246px;
}

.masonry-with-columns div:nth-child(23) {
  height: 498px;
  line-height: 498px;
}

.masonry-with-columns div:nth-child(24) {
  height: 313px;
  line-height: 313px;
}

.masonry-with-columns div:nth-child(25) {
  height: 407px;
  line-height: 407px;
}

.masonry-with-columns div:nth-child(26) {
  height: 148px;
  line-height: 148px;
}

.masonry-with-columns div:nth-child(27) {
  height: 291px;
  line-height: 291px;
}

.masonry-with-columns div:nth-child(28) {
  height: 494px;
  line-height: 494px;
}

.masonry-with-columns div:nth-child(29) {
  height: 287px;
  line-height: 287px;
}

.masonry-with-columns div:nth-child(30) {
  height: 347px;
  line-height: 347px;
}

.masonry-with-columns div:nth-child(31) {
  height: 444px;
  line-height: 444px;
}

.masonry-with-columns div:nth-child(32) {
  height: 174px;
  line-height: 174px;
}

.masonry-with-columns div:nth-child(33) {
  height: 157px;
  line-height: 157px;
}

.masonry-with-columns div:nth-child(34) {
  height: 439px;
  line-height: 439px;
}

.masonry-with-columns div:nth-child(35) {
  height: 254px;
  line-height: 254px;
}

.masonry-with-columns div:nth-child(36) {
  height: 376px;
  line-height: 376px;
}

<div class="masonry-with-columns">
  <div>
  <img src="https://picsum.photos/200/200" />
    1
  </div>
 <div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div><div>13</div><div>14</div><div>15</div></div>

Answer 1

发布后不久，我自己就知道了差距的原因。这是分配给div元素的行高。我也删除了行高和固定高度，然后将文本放入span元素。

Answer 2

使用line-height属性引起的问题，只需将其删除，即可解决您的问题。我不知道您为什么在这里需要它，它会使您的段落行307px分开。检出documentation以了解更多信息。

body {
  margin: 0;
  padding: 1rem;
}

.masonry-with-columns {
  columns: 6 200px;
  column-gap: 1rem;
}

.masonry-with-columns div {
  width: 150px;
  background: #EC985A;
  color: white;
  margin: 0 1rem 1rem 0;
  display: inline-block;
  width: 100%;
  text-align: center;
  font-family: system-ui;
  font-weight: 900;
  font-size: 2rem;
}

img {
  display: inline;
  width: calc(100% - 1rem);
  border-radius: 0.5rem;
  margin: 0.5rem;
  box-sizing: border-box;
}

.masonry-with-columns div:nth-child(1) {
  height: 307px;
  /*line-height: 307px; REMOVE THIS LINE FORM ALL*/ 
}

.masonry-with-columns div:nth-child(2) {
  height: 432px;
  line-height: 432px;
}

.masonry-with-columns div:nth-child(3) {
  height: 132px;
  line-height: 132px;
}

.masonry-with-columns div:nth-child(4) {
  height: 428px;
  line-height: 428px;
}

.masonry-with-columns div:nth-child(5) {
  height: 332px;
  line-height: 332px;
}


.masonry-with-columns div:nth-child(6) {
  height: 373px;
  line-height: 373px;
}

.masonry-with-columns div:nth-child(7) {
  height: 207px;
  line-height: 207px;
}

.masonry-with-columns div:nth-child(8) {
  height: 315px;
  line-height: 315px;
}

.masonry-with-columns div:nth-child(9) {
  height: 462px;
  line-height: 462px;
}

.masonry-with-columns div:nth-child(10) {
  height: 440px;
  line-height: 440px;
}

.masonry-with-columns div:nth-child(11) {
  height: 177px;
  line-height: 177px;
}

.masonry-with-columns div:nth-child(12) {
  height: 220px;
  line-height: 220px;
}

.masonry-with-columns div:nth-child(13) {
  height: 162px;
  line-height: 162px;
}

.masonry-with-columns div:nth-child(14) {
  height: 439px;
  line-height: 439px;
}

.masonry-with-columns div:nth-child(15) {
  height: 307px;
  line-height: 307px;
}

.masonry-with-columns div:nth-child(16) {
  height: 425px;
  line-height: 425px;
}

.masonry-with-columns div:nth-child(17) {
  height: 439px;
  line-height: 439px;
}

.masonry-with-columns div:nth-child(18) {
  height: 210px;
  line-height: 210px;
}

.masonry-with-columns div:nth-child(19) {
  height: 438px;
  line-height: 438px;
}

.masonry-with-columns div:nth-child(20) {
  height: 138px;
  line-height: 138px;
}

.masonry-with-columns div:nth-child(21) {
  height: 415px;
  line-height: 415px;
}

.masonry-with-columns div:nth-child(22) {
  height: 246px;
  line-height: 246px;
}

.masonry-with-columns div:nth-child(23) {
  height: 498px;
  line-height: 498px;
}

.masonry-with-columns div:nth-child(24) {
  height: 313px;
  line-height: 313px;
}

.masonry-with-columns div:nth-child(25) {
  height: 407px;
  line-height: 407px;
}

.masonry-with-columns div:nth-child(26) {
  height: 148px;
  line-height: 148px;
}

.masonry-with-columns div:nth-child(27) {
  height: 291px;
  line-height: 291px;
}

.masonry-with-columns div:nth-child(28) {
  height: 494px;
  line-height: 494px;
}

.masonry-with-columns div:nth-child(29) {
  height: 287px;
  line-height: 287px;
}

.masonry-with-columns div:nth-child(30) {
  height: 347px;
  line-height: 347px;
}

.masonry-with-columns div:nth-child(31) {
  height: 444px;
  line-height: 444px;
}

.masonry-with-columns div:nth-child(32) {
  height: 174px;
  line-height: 174px;
}

.masonry-with-columns div:nth-child(33) {
  height: 157px;
  line-height: 157px;
}

.masonry-with-columns div:nth-child(34) {
  height: 439px;
  line-height: 439px;
}

.masonry-with-columns div:nth-child(35) {
  height: 254px;
  line-height: 254px;
}

.masonry-with-columns div:nth-child(36) {
  height: 376px;
  line-height: 376px;
}

<div class="masonry-with-columns">
  <div>
  <img src="https://picsum.photos/200/200" />
    1
  </div>
 <div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div><div>13</div><div>14</div><div>15</div></div>