无法在 CSS 网格内使用边距

Question

我正在尝试构建一个 CSS 网格布局，在网格单元格内的元素周围留有边距。然而，严重的问题出现了……

这是我的代码：

*{
 margin:0;
 padding:0;
 box-sizing:border-box;
 -moz-box-sizing:border-box;
 -webkit-box-sizing:border-box;
}

.grida{
 position:fixed;
 left:0; top:29px; width:100%;
 height:calc(100% - 29px);
 overflow:hidden;
 display:grid;
 grid-template-columns:134px 34% auto;
}

.wrapa{
 padding-top:5px;
 background:#eee;
 margin:5px;
 border:2px solid green;
 border-radius:9px;
}

.inpsearch, .inptags{
 display:block;
 width:100%;
 line-height:21px;
 outline:none;
 padding:0 9px;
 background:white;
 margin:5px;
 border:2px ridge gold;
 border-radius:9px;
}

.titles{
 height:calc(100% - 40px);
 overflow-y:scroll;
 padding:9px 0;
 margin:5px;
 border:2px ridge gold;
 border-radius:5px;
}

.storytxt{
 display:block;
 padding:14px;
 width:100%;
 height:calc(100% - 40px);
 outline:none;
 resize:none;
 overflow-y:scroll;
 background:#eee;
 margin:5px;
 border:2px ridge gold;
 border-radius:9px;
}

<div class='grida'>
<div class='wrapa'>
<div class='lang'>lorem</div>
<div class='lang'>lorem</div>
<div class='lang'>lorem</div>
</div>
<div class='wrapb'>
<input type='search' class='inpsearch' placeholder='SEARCH'>
<div class='titles'>
<div class='title'>lorem ipsum</div>
<div class='title'>lorem ipsum</div>
<div class='title'>lorem ipsum</div>
</div>
</div>
<div class='wrapc'>
<input type='text' class='inptags' placeholder='TAGS'>
<textarea class='storytxt'></textarea>
</div>
</div>

这些是我的问题：

为什么类inpsearch和inptags的HTML元素之间没有space？（在视觉输出的上部）为什么 HTML 元素类 inptags 和 storytxt 的部分在右侧不可见？（在视觉输出的下部）

有什么帮助吗？

Answer 1

显然，您无法在 css 网格中正确使用 margin。不过，你可以用grid-gap来引入5pxmargin。参见 this link。（好吧，我没有找到 margins 的解决方案，但毕竟我是 CSS 新手 :-) ！）

编辑 storytxt 的问题是边距被添加到通过 width 和 display: block 设置为 100% 的宽度之上。我通过使用 width: calc(100% - 10px) 和 5px 的 margin 来解释这一点。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

.grida {
  position: fixed;
  left: 0;
  top: 29px;
  width: 100%;
  height: calc(100% - 29px);
  overflow: hidden;
  display: grid;
  grid-template-columns: 134px 34% auto;
  grid-gap: 5px;
}

.wrapa {
  padding-top: 5px;
  background: #eee;
  margin: 0px;
  border: 2px solid green;
  border-radius: 9px;
}

.wrapb,
.wrapc {
  border: 0px black solid;
  /* used for debugging */
}

.inpsearch,
.inptags {
  display: block;
  width: 100%;
  line-height: 21px;
  outline: none;
  padding: 0 9px;
  background: white;
  margin: 0px;
  border: 2px ridge gold;
  border-radius: 9px;
}

.titles {
  height: calc(100% - 40px);
  overflow-y: scroll;
  padding: 9px 0;
  margin: 5px;
  border: 2px ridge gold;
  border-radius: 5px;
}

.storytxt {
  display: block;
  padding: 14px;
  height: calc(100% - 40px);
  width: calc(100% - 10px);
  margin: 5px;
  outline: none;
  resize: none;
  overflow-y: scroll;
  background: #eee;
  border: 2px ridge gold;
  border-radius: 9px;
}

<div class='grida'>
  <div class='wrapa'>
    <div class='lang'>lorem</div>
    <div class='lang'>lorem</div>
    <div class='lang'>lorem</div>
  </div>
  <div class='wrapb'>
    <input type='search' class='inpsearch' placeholder='SEARCH'>
    <div class='titles'>
      <div class='title'>lorem ipsum</div>
      <div class='title'>lorem ipsum</div>
      <div class='title'>lorem ipsum</div>
    </div>
  </div>
  <div class='wrapc'>
    <input type='text' class='inptags' placeholder='TAGS'>
    <textarea class='storytxt'></textarea>
  </div>
</div>

如果post对您有帮助，请告诉我！谢谢！

Answer 2

我会这样做。

*{
 margin:0;
 padding:0;
 box-sizing:border-box;
 -moz-box-sizing:border-box;
 -webkit-box-sizing:border-box;
}

.grida{
 position:fixed;
 left:0; top:29px; width:100%;
 height:calc(100% - 29px);
 overflow:hidden;
 display:grid;
 grid-template-columns:134px 34% auto;
}

.wrapa{
 padding-top:5px;
 background:#eee;
 margin:5px;
 border:2px solid green;
 border-radius:9px;
}

.wrapb, wrapc{
 padding: 0 10px;
}

.inpsearch, .inptags{
 display:block;
 width:100%;
 line-height:21px;
 outline:none;
 padding:0 9px;
 background:white;
 margin-bottom:5px;
 border:2px ridge gold;
 border-radius:9px;
}

.titles{
 height:calc(100% - 40px);
 overflow-y:scroll;
 padding:9px 0;
 border:2px ridge gold;
 border-radius:5px;
}

.storytxt{
 display:block;
 padding:14px;
 width:100%;
 height:calc(100% - 40px);
 outline:none;
 resize:none;
 overflow-y:scroll;
 background:#eee;
 border:2px ridge gold;
 border-radius:9px;
}

<body>
<div class='grida'>
<div class='wrapa'>
<div class='lang'>lorem</div>
<div class='lang'>lorem</div>
<div class='lang'>lorem</div>
</div>
<div class='wrapb'>
<input type='search' class='inpsearch' placeholder='SEARCH'>
<div class='titles'>
<div class='title'>lorem ipsum</div>
<div class='title'>lorem ipsum</div>
<div class='title'>lorem ipsum</div>
</div>
</div>
<div class='wrapc'>
<input type='text' class='inptags' placeholder='TAGS'>
<textarea class='storytxt'></textarea>
</div>
</div>
</body>

所以你需要：

添加到 wrapb 和 wrapc 填充：padding: 0 10px
删除 titles 和 storytxt
将inpsearch和inptags中的margin: 5px替换为margin-bottom: 5px

无法在 CSS 网格内使用边距

Unable to use margins inside CSS grid

html

css

margin

css-grid