首页 / 技术问答 / Html问答列表 / 问答详情

Html Div 容器不会遵守边距、填充或间隙

我对一般的css和网页开发是个新手.我的经验是使用Python.我有一个问题，容器包含在一个网格视图中，没有遵守我在右边或左边添加的任何边距、填充或间隙.它的顶部和底部都很好，但我try 的所有东西都不适用于右侧和左侧.

/* CSS style for my container.*/ 

.results-container {
  text-align       : left;
  background-color : var(--container-color);
  /* Background color of the container */
  color            : var(--text-color);
  border-radius    : 5px;  /* Rounded corners */
  padding          : 10px;       /* Spacing inside the container */
  max-width        : 100%;
  width            : 100%;
  box-shadow       : 0px 0px 10px rgba(0, 0, 0, 0.7); /* Add a shadow for visual effect */
  display          : flex;
  flex-direction   : column;
  margin           : 10px;
}


/* The style for the Grid View. */

.grid-container {
  display               : grid;
  grid-template-columns : repeat(3, 1fr); /* Automatically decide the number of columns based on screen width */
  margin                : 20px;
  gap                   : 20px;
  justify-items         : center;
  align-items           : center;
  padding               : 0 10px;
}
<div class="grid-container">
  <div class="results-container">
    <h4 class="song-name">Testing Container</h4>
    <p class="song-info">Author: Casey Koehn</p>
    <p class="song-info">First Verse: Test verse here</p>
    <p class="song-info">Chorus: Test chorus here</p>
  </div>
  <div class="results-container">
    <h4 class="song-name">Testing Container</h4>
    <p class="song-info">Author: Casey Koehn</p>
    <p class="song-info">First Verse: Test verse here</p>
    <p class="song-info">Chorus: Test chorus here</p>
  </div>
  <div class="results-container">
    <h4 class="song-name">Testing Container</h4>
    <p class="song-info">Author: Casey Koehn</p>
    <p class="song-info">First Verse: Test verse here</p>
    <p class="song-info">Chorus: Test chorus here</p>
  </div>
  <div class="results-container">
    <h4 class="song-name">Testing Container</h4>
    <p class="song-info">Author: Casey Koehn</p>
    <p class="song-info">First Verse: Test verse here</p>
    <p class="song-info">Chorus: Test chorus here</p>
  </div>
  <div class="results-container">
    <h4 class="song-name">Testing Container</h4>
    <p class="song-info">Author: Casey Koehn</p>
    <p class="song-info">First Verse: Test verse here</p>
    <p class="song-info">Chorus: Test chorus here</p>
  </div>
</div>

Inspector Screenshot

Problem Screenshot

我try 在容器中添加边距，在网格视图中填充，在网格视图中添加间隙，并try 移除方框阴影，但都没有效果.正如前面提到的，我是网络开发人员的新手，还在学习中.这可能是一个我没有注意到的非常简单的错误.

推荐答案

你需要投入一些时间来学习CSS box model米.

enter image description here

默认情况下，元素的宽度/高度是指content box的宽度/高度；它确实包括填充框或边框.因此，如果对一个元素设置width: 100%;，并且该元素有填充，则其外观大小将大于width: 100%;%.

最简单的解决方案是删除栅格子对象上的width: 100%;个.在没有进一步指示的情况下，他们会表现得非常好.

body {
  margin: 1em;
  font-family: sans-serif;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1em;
}

.grid-container>* {
  background-color: #666;
  color: white;
  border-radius: 5px;
  padding: 1em;
  box-shadow: 0px 0px 6px rgb(0 0 0 /0.7);
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

.grid-container>*>* {
  margin: 0;
}
<div class="grid-container">
    <div>
        <h4>Testing Container</h4>
        <p>Author: Casey Koehn</p>
        <p>First Verse: Test verse here</p>
        <p>Chorus: Test chorus here</p>
    </div>
    <div>
        <h4>Testing Container</h4>
        <p>Author: Casey Koehn</p>
        <p>First Verse: Test verse here</p>
        <p>Chorus: Test chorus here</p>
    </div>
    <div>
        <h4>Testing Container</h4>
        <p>Author: Casey Koehn</p>
        <p>First Verse: Test verse here</p>
        <p>Chorus: Test chorus here</p>
    </div>
    <div>
        <h4>Testing Container</h4>
        <p>Author: Casey Koehn</p>
        <p>First Verse: Test verse here</p>
        <p>Chorus: Test chorus here</p>
    </div>
    <div>
        <h4>Testing Container</h4>
        <p>Author: Casey Koehn</p>
        <p>First Verse: Test verse here</p>
        <p>Chorus: Test chorus here</p>
    </div>
</div>

另一种可能的解决方案是在栅格子对象上设置box-sizing: border-box;.这条规则意味着，您指定的任何宽度/高度都应包括填充和边框，而不是排除它.

body {
  margin: 1em;
  font-family: sans-serif;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1em;
}

.grid-container>* {
  background-color: #666;
  color: white;
  border-radius: 5px;
  padding: 1em;
  box-shadow: 0px 0px 6px rgb(0 0 0 /0.7);
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

.grid-container>*>* {
  margin: 0;
}
<div class="grid-container">
    <div>
        <h4>Testing Container</h4>
        <p>Author: Casey Koehn</p>
        <p>First Verse: Test verse here</p>
        <p>Chorus: Test chorus here</p>
    </div>
    <div>
        <h4>Testing Container</h4>
        <p>Author: Casey Koehn</p>
        <p>First Verse: Test verse here</p>
        <p>Chorus: Test chorus here</p>
    </div>
    <div>
        <h4>Testing Container</h4>
        <p>Author: Casey Koehn</p>
        <p>First Verse: Test verse here</p>
        <p>Chorus: Test chorus here</p>
    </div>
    <div>
        <h4>Testing Container</h4>
        <p>Author: Casey Koehn</p>
        <p>First Verse: Test verse here</p>
        <p>Chorus: Test chorus here</p>
    </div>
    <div>
        <h4>Testing Container</h4>
        <p>Author: Casey Koehn</p>
        <p>First Verse: Test verse here</p>
        <p>Chorus: Test chorus here</p>
    </div>
</div>

如果你有时间进一步阅读，these articles介绍了盒式机型的一些历史，以及为什么我们有box-sizing选项来在两种竞争机型之间切换.

Html相关问答推荐

如何改进这个jQuery滑动器的功能？

试图让三个Divs与下面的另外三个对齐

<；img>；和具有负边距的元素的堆叠顺序

HTML+CSS+JS动态选中文本高亮 colored颜色 变化

在网页上的 Select 器中显示选项时出现问题：未在GO模板中传递循环{{range}}的数据

在Firefox中，使用写入模式：Vertical-LR时，不随内容扩展的css弹性项

Css网格：两列，除非小于150px

添加带有悬停动画的喜欢图标

为什么 `：：before` 在使用内容 `url(svg)` 时会增加一些高度

在span中添加

如何保持块扩展以填充视口？

排列卡片时遇到困难

为什么即使我点击其他地方，我的 contenteditable="true" 也会被激活？

如何将内容放置在侧边栏旁边？

模拟另一个输入值设置表单输入的数值

XPATH Select h2标签和

标签之间或h2标签和 标签之间的td元素，以立即为准

透明渐变凹矩形

是否可以将文本添加到表格边框？

如何使列表的第一个元素比 css 中的其他元素大？

基本上，我想要两列包含文本和图像，但第二列是倒置的

实用课程推荐
相关教程推荐
休闲君评测 |  TOOLFK工具网 |  古诗文网 |  良许Linux教程网 |  Python之禅 |  红色石头 |  入党申请书 | 

© 2020 Hi LearnFk 意见反馈 免责声明 关于我们 桂ICP备11002319号-3 友链&广告位+QQ: 1963612630