如何在HTML和CSS中删除`
`内部的空格？

huangapple
go评论59阅读模式
英文:

How do I remove space inside div in html and css?

问题

我有一个div里面有一些图片。当我为图片设置10像素的外边距时，它会应用到所有边。我想要的是删除靠近div边缘的图片周围的间距。

我标记了一些想要删除间距的红色区域。

英文:

I have one div inside and some images. When I give a margin for the image of 10px it applies to all sides. What I want to happen is to remove the spacing around the image closest to the div side.

I mark some red areas where I want space removed:

如何在HTML和CSS中删除`<div>`内部的空格？

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.soot {
  width: 33.3%;
  height: 400px;
  margin: 10px;
  border: 2px solid yellow;
}

.imgbox {
  `` width: 100%;
  background-color: white;
  padding: 0;
  margin-top: 10px;
  border: 1px solid gray;
}

.show {
  display: flex;
}

<!-- language: lang-html -->

&lt;div class=&quot;imgbox&quot;&gt;
  &lt;div class=&quot;show&quot;&gt;
    &lt;img class=&quot;soot soot1&quot; src=&quot;https://via.placeholder.com/200x300.jpg&quot; alt=&quot;&quot;&gt;
    &lt;img class=&quot;soot soot2&quot; src=&quot;https://via.placeholder.com/200x300.jpg&quot; alt=&quot;&quot;&gt;
    &lt;img class=&quot;soot soot3&quot; src=&quot;https://via.placeholder.com/200x300.jpg&quot; alt=&quot;&quot;&gt;
  &lt;/div&gt;
  &lt;div class=&quot;show&quot;&gt;
    &lt;img class=&quot;soot soot4&quot; src=&quot;https://via.placeholder.com/200x300.jpg&quot; alt=&quot;&quot;&gt;
    &lt;img class=&quot;soot soot5&quot; src=&quot;https://via.placeholder.com/200x300.jpg&quot; alt=&quot;&quot;&gt;
    &lt;img class=&quot;soot soot6&quot; src=&quot;https://via.placeholder.com/200x300.jpg&quot; alt=&quot;&quot;&gt;
  &lt;/div&gt;
  &lt;div class=&quot;show&quot;&gt;
    &lt;img class=&quot;soot soot7&quot; src=&quot;https://via.placeholder.com/200x300.jpg&quot; alt=&quot;&quot;&gt;
    &lt;img class=&quot;soot soot8&quot; src=&quot;https://via.placeholder.com/200x300.jpg&quot; alt=&quot;&quot;&gt;
    &lt;img class=&quot;soot soot9&quot; src=&quot;https://via.placeholder.com/200x300.jpg&quot; alt=&quot;&quot;&gt;
  &lt;/div&gt;
&lt;/div&gt;

<!-- end snippet -->

Remove space inside the div where the images must be set having no space around outer the ones.

答案1

得分: 2

不要为图像使用边距，而是使用gap属性！但是，最简单的方法是不在此处使用弹性盒（Flexbox）。在这里，你需要的是CSS网格布局（CSS-Grid）。CSS-Grid也可以使用gap属性：

.soot {
  border: 2px solid yellow;
  width: 100%;
  display: block;
  box-sizing: border-box;
}

.imgbox {
  background-color: white;
  margin-top: 10px;
  border: 1px solid gray;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
}

如果坚持使用Flexbox，请仍然删除图像的边距并正确应用gap属性。在这里的问题或难点是，你需要手动计算图像的正确宽度：

:root {
  --gap: 20px;
  --columns: 3;
}

.imgbox {
  background-color: white;
  margin-top: 10px;
  border: 1px solid gray;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.show {
  display: flex;
  gap: var(--gap);
}

.soot {
  border: 2px solid yellow;
  width: calc((100% - (var(--gap) * (var(--columns) - 1))) / var(--columns));
  display: block;
  box-sizing: border-box;
}
英文:

Don't use margins for the images. Use the gap property instead!

However, the easiest way is not to use flexbox here. What you want here is CSS-Grid. CSS-Grid can also make usage of the gap property:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.soot {
  border: 2px solid yellow;
  width: 100%;
  display: block;
  box-sizing: border-box;
}

.imgbox {
  background-color: white;
  margin-top: 10px;
  border: 1px solid gray;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
}

<!-- language: lang-html -->

&lt;div class=&quot;imgbox&quot;&gt;
  &lt;img class=&quot;soot soot1&quot; src=&quot;https://via.placeholder.com/200x300.jpg&quot; alt=&quot;&quot;&gt;
  &lt;img class=&quot;soot soot2&quot; src=&quot;https://via.placeholder.com/200x300.jpg&quot; alt=&quot;&quot;&gt;
  &lt;img class=&quot;soot soot3&quot; src=&quot;https://via.placeholder.com/200x300.jpg&quot; alt=&quot;&quot;&gt;
  &lt;img class=&quot;soot soot4&quot; src=&quot;https://via.placeholder.com/200x300.jpg&quot; alt=&quot;&quot;&gt;
  &lt;img class=&quot;soot soot5&quot; src=&quot;https://via.placeholder.com/200x300.jpg&quot; alt=&quot;&quot;&gt;
  &lt;img class=&quot;soot soot6&quot; src=&quot;https://via.placeholder.com/200x300.jpg&quot; alt=&quot;&quot;&gt;
  &lt;img class=&quot;soot soot7&quot; src=&quot;https://via.placeholder.com/200x300.jpg&quot; alt=&quot;&quot;&gt;
  &lt;img class=&quot;soot soot8&quot; src=&quot;https://via.placeholder.com/200x300.jpg&quot; alt=&quot;&quot;&gt;
  &lt;img class=&quot;soot soot9&quot; src=&quot;https://via.placeholder.com/200x300.jpg&quot; alt=&quot;&quot;&gt;
&lt;/div&gt;

<!-- end snippet -->

If you insist on using Flexbox, then still remove the margin from the images and apply the gap property correctly. The issue or difficulty here is, that you manually need to calculate the correct width of the images:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

:root {
  --gap: 20px;
  --columns: 3;
}

.imgbox {
  background-color: white;
  margin-top: 10px;
  border: 1px solid gray;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.show {
  display: flex;
  gap: var(--gap);
}

.soot {
  border: 2px solid yellow;
  width: calc((100% - (var(--gap) * (var(--columns) - 1))) / var(--columns));
  display: block;
  box-sizing: border-box;
}

<!-- language: lang-html -->

&lt;div class=&quot;imgbox&quot;&gt;
  &lt;div class=&quot;show&quot;&gt;
    &lt;img class=&quot;soot soot1&quot; src=&quot;https://via.placeholder.com/200x300.jpg&quot; alt=&quot;&quot;&gt;
    &lt;img class=&quot;soot soot2&quot; src=&quot;https://via.placeholder.com/200x300.jpg&quot; alt=&quot;&quot;&gt;
    &lt;img class=&quot;soot soot3&quot; src=&quot;https://via.placeholder.com/200x300.jpg&quot; alt=&quot;&quot;&gt;
  &lt;/div&gt;
  &lt;div class=&quot;show&quot;&gt;
    &lt;img class=&quot;soot soot4&quot; src=&quot;https://via.placeholder.com/200x300.jpg&quot; alt=&quot;&quot;&gt;
    &lt;img class=&quot;soot soot5&quot; src=&quot;https://via.placeholder.com/200x300.jpg&quot; alt=&quot;&quot;&gt;
    &lt;img class=&quot;soot soot6&quot; src=&quot;https://via.placeholder.com/200x300.jpg&quot; alt=&quot;&quot;&gt;
  &lt;/div&gt;
  &lt;div class=&quot;show&quot;&gt;
    &lt;img class=&quot;soot soot7&quot; src=&quot;https://via.placeholder.com/200x300.jpg&quot; alt=&quot;&quot;&gt;
    &lt;img class=&quot;soot soot8&quot; src=&quot;https://via.placeholder.com/200x300.jpg&quot; alt=&quot;&quot;&gt;
    &lt;img class=&quot;soot soot9&quot; src=&quot;https://via.placeholder.com/200x300.jpg&quot; alt=&quot;&quot;&gt;
  &lt;/div&gt;
&lt;/div&gt;

<!-- end snippet -->

答案2

得分: 0

要删除侧边的空白并添加顶部/底部边距，您可以在行容器上使用{margin: 20px 0;}，即**.show**。

要删除顶部和底部的空白，您需要从第一行删除顶部边距，并从最后一行删除底部边距。我使用了.show:first-child{}和.show:last-child{}来实现这一点。使用* { box-sizing: border-box; }以确保边距和填充不会干扰图像大小，图像大小设置为33.3%（以避免溢出和无用的计算以获得正确的大小）。此外，第一和第二个图像将具有右填充，使用.soot:nth-child(1), .soot:nth-child(2) {padding-right:20px} 

* {
  box-sizing: border-box;
}

.imgbox {
  background-color: rgb(255, 255, 255);
  padding: 0;
  margin-top: 10px;
  border: 2px solid gray;
}

.show {
  display: flex;
  margin: 20px 0;
}

.show:first-child {
  margin-top: 0;
}

.show:last-child {
  margin-bottom: 0;
}

.soot {
  width: 33.3%;
  height: 400px;
}

.soot:nth-child(1),
.soot:nth-child(2) {
  padding-right: 20px;
}

<div class="imgbox">
  <div class="show">
    <img class="soot soot1" src="https://picsum.photos/seed/coding/600" alt="">
    <img class="soot soot2" src="https://picsum.photos/seed/coding/600" alt="">
    <img class="soot soot3" src="https://picsum.photos/seed/coding/600" alt="">
  </div>
  <div class="show">
    <img class="soot soot4" src="https://picsum.photos/seed/coding/600" alt="">
    <img class="soot soot5" src="https://picsum.photos/seed/coding/600" alt="">
    <img class="soot soot6" src="https://picsum.photos/seed/coding/600" alt="">
  </div>
  <div class="show">
    <img class="soot soot7" src="https://picsum.photos/seed/coding/600" alt="">
    <img class="soot soot8" src="https://picsum.photos/seed/coding/600" alt="">
    <img class="soot soot9" src="https://picsum.photos/seed/coding/600" alt="">
  </div>
</div>
英文:

To remove the white spaces on the sides and add top/bottom margin you can use {margin: 20px 0;} on the row container i.e. .show.
For removing the top and bottom spaces you have to remove the top margin from the first row and bottom margin from last row. I've used .show:first-Child{} and .show:last-Child{} for this. Use * { box-sizing: border-box; } so that the margin and padding don't mess up the image-size which is set to 33.3% (avoiding overflow and useless calculations for proper sizing). Also, the first and second image will have padding-right, use .soot:nth-Child(1), .soot:nth-Child(2) {padding-right:20px}

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

* {
  box-sizing: border-box;
}

.imgbox {
  background-color: rgb(255, 255, 255);
  padding: 0;
  margin-top: 10px;
  border: 2px solid gray;
}

.show {
  display: flex;
  margin: 20px 0;
}

.show:first-child {
  margin-top: 0;
}

.show:last-child {
  margin-bottom: 0;
}

.soot {
  width: 33.3%;
  height: 400px;
}

.soot:nth-child(1),
.soot:nth-child(2) {
  padding-right: 20px;
}

<!-- language: lang-html -->

&lt;div class=&quot;imgbox&quot;&gt;
  &lt;div class=&quot;show&quot;&gt;
    &lt;img class=&quot;soot soot1&quot; src=&quot;https://picsum.photos/seed/coding/600&quot; alt=&quot;&quot;&gt;
    &lt;img class=&quot;soot soot2&quot; src=&quot;https://picsum.photos/seed/coding/600&quot; alt=&quot;&quot;&gt;
    &lt;img class=&quot;soot soot3&quot; src=&quot;https://picsum.photos/seed/coding/600&quot; alt=&quot;&quot;&gt;
  &lt;/div&gt;
  &lt;div class=&quot;show&quot;&gt;
    &lt;img class=&quot;soot soot4&quot; src=&quot;https://picsum.photos/seed/coding/600&quot; alt=&quot;&quot;&gt;
    &lt;img class=&quot;soot soot5&quot; src=&quot;https://picsum.photos/seed/coding/600&quot; alt=&quot;&quot;&gt;
    &lt;img class=&quot;soot soot6&quot; src=&quot;https://picsum.photos/seed/coding/600&quot; alt=&quot;&quot;&gt;
  &lt;/div&gt;
  &lt;div class=&quot;show&quot;&gt;
    &lt;img class=&quot;soot soot7&quot; src=&quot;https://picsum.photos/seed/coding/600&quot; alt=&quot;&quot;&gt;
    &lt;img class=&quot;soot soot8&quot; src=&quot;https://picsum.photos/seed/coding/600&quot; alt=&quot;&quot;&gt;
    &lt;img class=&quot;soot soot9&quot; src=&quot;https://picsum.photos/seed/coding/600&quot; alt=&quot;&quot;&gt;
  &lt;/div&gt;
&lt;/div&gt;

<!-- end snippet -->

答案3

得分: 0

如果您不想使用网格，请为每个图片单独添加一个类，并仅在不靠近边框的一侧添加边距，例如：margin-left: 10px。

.soot {
  width: 33.3%;
  height: 400px;
  margin: 10px; /* 从这里移除边距 */
  border: 2px solid yellow;
}

.soot1 {
  margin-bottom: 10px;
  margin-right: 10px;
}

<div class="imgbox">
  <div class="show">
    <img class="soot soot1" src="https://via.placeholder.com/200x300.jpg" alt="">
  </div>
</div>
英文:

If you don't want to use grid, just add a separate class to every picture and then only add margins to the sides that aren't next to the border ex. margin-left: 10px.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

 .soot {
      width: 33.3%;
      height: 400px;
      margin: 10px; /*remove the margin from here*/
      border: 2px solid yellow;
    }

    .soot1 {
      margin-bottom: 10px;
      margin-right: 10px;
    }

<!-- language: lang-html -->

&lt;div class=&quot;imgbox&quot;&gt;
  &lt;div class=&quot;show&quot;&gt;
    &lt;img class=&quot;soot soot1&quot; src=&quot;https://via.placeholder.com/200x300.jpg&quot; alt=&quot;&quot;&gt;

<!-- end snippet -->

答案4

得分: -1

如果我理解正确

  .imgbox .show:first-child .soot {
    margin-top: 0 !important;
  }
  .imgbox .show:last-child .soot {
    margin-bottom: 0 !important;
  }
  .imgbox .show .soot:first-child {
    margin-left: 0 !important;
  }
  .imgbox .show .soot:last-child {
    margin-right: 0 !important;
  }
英文:

if i understand well

  .imgbox .show:first-child .soot {
    margin-top: 0 !important;
  }
  .imgbox .show:last-child .soot {
    margin-bottom: 0 !important;
  }
  .imgbox .show .soot:first-child {
    margin-left: 0 !important;
  }
  .imgbox .show .soot:last-child {
    margin-right: 0 !important;
  }

答案5

得分: -1

.soot {
  width: 33.3%;
  height: 400px;
  border: 2px solid yellow;
}

.imgbox {
  width: 100%;
  background-color: white;
  padding: 0;
  margin-top: 10px;
  border: 1px solid gray;
  width: max-content;
  position: absolute;
}

.show {
  display: flex;
}

<div class="imgbox">
  <div class="show">
    <img class="soot soot1" src="https://via.placeholder.com/200x300.jpg" alt="">
    <img class="soot soot2" src="https://via.placeholder.com/200x300.jpg" alt="">
    <img class="soot soot3" src="https://via.placeholder.com/200x300.jpg" alt="">
  </div>
  <div class="show">
    <img class="soot soot4" src="https://via.placeholder.com/200x300.jpg" alt="">
    <img class="soot soot5" src="https://via.placeholder.com/200x300.jpg" alt="">
    <img class="soot soot6" src="https://via.placeholder.com/200x300.jpg" alt="">
  </div>
  <div class="show">
    <img class="soot soot7" src="https://via.placeholder.com/200x300.jpg" alt="">
    <img class="soot soot8" src="https://via.placeholder.com/200x300.jpg" alt="">
    <img class="soot soot9" src="https://via.placeholder.com/200x300.jpg" alt="">
  </div>
</div>
英文:

<!-- begin snippet: js hide: false console: true babel: null -->

<!-- language: lang-css -->

.soot {
  width: 33.3%;
  height: 400px;
  border: 2px solid yellow;

}

.imgbox {
  width: 100%;
  background-color: white;
  padding: 0;
  margin-top: 10px;
  border: 1px solid gray;

width: max-content;
position : absolute

}

.show {
  display: flex;
}

<!-- language: lang-html -->

&lt;div class=&quot;imgbox&quot;&gt;
  &lt;div class=&quot;show&quot;&gt;
    &lt;img class=&quot;soot soot1&quot; src=&quot;https://via.placeholder.com/200x300.jpg&quot; alt=&quot;&quot;&gt;
    &lt;img class=&quot;soot soot2&quot; src=&quot;https://via.placeholder.com/200x300.jpg&quot; alt=&quot;&quot;&gt;
    &lt;img class=&quot;soot soot3&quot; src=&quot;https://via.placeholder.com/200x300.jpg&quot; alt=&quot;&quot;&gt;
  &lt;/div&gt;
  &lt;div class=&quot;show&quot;&gt;
    &lt;img class=&quot;soot soot4&quot; src=&quot;https://via.placeholder.com/200x300.jpg&quot; alt=&quot;&quot;&gt;
    &lt;img class=&quot;soot soot5&quot; src=&quot;https://via.placeholder.com/200x300.jpg&quot; alt=&quot;&quot;&gt;
    &lt;img class=&quot;soot soot6&quot; src=&quot;https://via.placeholder.com/200x300.jpg&quot; alt=&quot;&quot;&gt;
  &lt;/div&gt;
  &lt;div class=&quot;show&quot;&gt;
    &lt;img class=&quot;soot soot7&quot; src=&quot;https://via.placeholder.com/200x300.jpg&quot; alt=&quot;&quot;&gt;
    &lt;img class=&quot;soot soot8&quot; src=&quot;https://via.placeholder.com/200x300.jpg&quot; alt=&quot;&quot;&gt;
    &lt;img class=&quot;soot soot9&quot; src=&quot;https://via.placeholder.com/200x300.jpg&quot; alt=&quot;&quot;&gt;
  &lt;/div&gt;
&lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年6月15日 14:55:25
  • 转载请务必保留本文链接：https://go.coder-hub.com/76479860.html
  • css
  • html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定