显示间隙宽度较大：块

Question

我有一个关于显示的问题：块；

我制作了一个包含 3 个不同栏的部分。当您在 phone 上看到该网站时，各栏将相互显示。当您在桌面上看到该网站时，各栏将并排显示。

唯一的问题是列之间的差距...

有谁知道如何使列之间的间距变大？

网站；

https://www.spiralex.nl/

我的代码(css);

.blabla{
max-width: 1170px;
margin-right: auto;
margin-left: auto;
display: block;
}

@media only screen and (max-width: 767px){ 
  .blabla{
    display: grid;
  }
}

#column2{
  display: inline-block;
  text-decoration: none;
  max-width: 381px;
  max-height: 463px;
  margin: 0;
  letter-spacing: .03571em;
 }

#column1{
  display: inline-block;
  text-decoration: none;
  max-width: 381px;
  max-height: 463px;
  margin: 0;
  letter-spacing: .03571em;
}
#column3{
  display: inline-block;
  text-decoration: none;
  max-width: 381px;
  max-height: 463px;
  margin: 0;
  letter-spacing: .03571em;
}

Answer 1

您可以使用 padding:

.blabla > div {
  padding: 0 10px;
}

margin 设置元素之间的间距，因此设置margin 会导致div的两个break。但是 padding 设置元素轮廓与其内容之间的间距。

显示间隙宽度较大：块

Gap width larger on display: block

html

css

multiple-columns