无法在CSS网格中使用边距
无法在CSS网格中使用边距
提问于 2018-08-18 15:49:00
我正在尝试构建一个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类的超文本标记语言元素之间没有空格？(在视觉输出的上半部分)为什么具有类inptags和storytxt的部分HTML元素在右侧不可见？(在视觉输出的下半部分)
有什么帮助吗？
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-08-18 16:15:15
我会这样做的。
*{
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>
因此，您需要：
使用margin-bottom: 5px添加
- to
wrapb和wrapca padding：padding: 0 10px - remove
storytxt - replace
margin: 5pxininpsearch和inptags
Stack Overflow用户
发布于 2018-08-18 16:02:01
显然，你不能在css grid中正确使用margin。但是，您可以使用grid-gap引入5px margin。参见this link。(嗯，我没有找到margin的解决方案，但我毕竟是一个CSS新手:-)！
编辑和编辑您的storytxt的问题是，边距被添加到宽度之上，宽度通过width和display: block设置为100%。我通过使用margin为5px的width: calc(100% - 10px)解决了这个问题。
* {
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>
请让我知道这篇文章是否对你有帮助！谢谢!
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51906481
复制相关文章
相似问题