Html 未正确应用边距/填充

这是我的HTML和CSS代码。以下是我遇到的问题的图像：

我不知道为什么上面的填充物是10px，应该是20px

我试图调整各种元素的边距和填充，但似乎没有一个能调整问题。有人知道是什么导致了这种情况，以及如何修复它吗

@进口的https://fonts.googleapis.com/css?family=Roboto:300,900'; /* 字体系列：“Roboto”，无衬线*/ html，正文{margin:0；padding:0；字体系列：'Roboto'，无衬线；背景：ffffff；} img{宽度：100%；显示：块；} .block{color:fff；字体大小：18px；背景：444444；文本对齐：居中；填充：10px 0px；}/*列内填充*/ *{边距：0；填充：0；-webkit框大小：边框框；-moz框大小：边框框；框大小：边框框；} .wrap{宽度：75%；边距：0自动；背景：透明；填充：10px；}/*填充周围网格*/ .grid{宽度：100%；} .grid:在{清除：两者；内容：；显示：表；}之后 .row{填充：0px 0；背景：透明；} .col-1-4{宽度：25%；} .col-1-2{宽度：50%；} .col-3-4{宽度：75%；} .col-1-1{宽度：100%；} .col-1-5{宽度：20%；} [class*='col']{float:left；padding:10px；}/*列和行之间的填充*/ .gallery网格{边距：0；填充：0；列表样式：无；位置：相对；宽度：100%；} .gallery网格li{位置：相对；浮动：左侧；溢出：隐藏；宽度：16.666666 7%；宽度：-webkit-calc100%/6；宽度：calc100%/6；} @媒体最大宽度：768px{[class*='grid']{width:100%；}[class*='col']{width:100%；padding:10px 20px；} @媒体最大宽度：768px{.gallery grid li{宽度：33.3333333%；宽度：-webkit-calc100%/3；宽度：calc100%/3；} 1-4 1-4 1-4 1-4 1-2 1-2 1-1 1-5 1-5 1-5 1-5 1-5

---

你只需要更新这个

.col-1-1 { width: 100%; padding-top: 20px !important; }

在您的代码中，COL周围有一个10px的填充，因此在2 COL之间总共有一个20px的填充

---

或者将.col-1-1的规则设置在col*规则之下。那就没有了！重要提示。

尝试在每一行后添加clear:两种样式

@进口的https://fonts.googleapis.com/css?family=Roboto:300,900'; /* 字体系列：“Roboto”，无衬线*/ html，正文{margin:0；padding:0；字体系列：'Roboto'，无衬线；背景：ffffff；} img{宽度：100%；显示：块；} .block{color:fff；字体大小：18px；背景：444444；文本对齐：居中；填充：10px 0px；}/*列内填充*/ *{边距：0；填充：0；-webkit框大小：边框框；-moz框大小：边框框；框大小：边框框；} .wrap{宽度：75%；边距：0自动；背景：透明；填充：10px；}/*填充周围网格*/ .grid{宽度：100%；} .grid:在{清除：两者；内容：；显示：表；}之后 .row{填充：0px 0；背景：透明；} .col-1-4{宽度：25%；} .col-1-2{宽度：50%；} .col-3-4{宽度：75%；} .col-1-1{宽度：100%；} .col-1-5{宽度：20%；} [class*='col']{float:left；padding:10px；}/*列和行之间的填充*/ .gallery网格{边距：0；填充：0；列表样式：无；位置：相对；宽度：100%；} .gallery网格li{位置：相对；浮动：左侧；溢出：隐藏；宽度：16.666666 7%；宽度：-webkit-calc100%/6；宽度：calc100%/6；} @媒体最大宽度：768px{[class*='grid']{width:100%；}[class*='col']{width:100%；padding:10px 20px；} @媒体最大宽度：768px{.gallery grid li{宽度：33.3333333%；宽度：-webkit-calc100%/3；宽度：calc100%/3；} 1-4 1-4 1-4 1-4 1-2 1-2 1-1 1-5 1-5 1-5 1-5 1-5

---

在CSS中，在最后一行的第二行，媒体查询表示填充应为：

padding: 10px 20px;

读：填充上下=10px，而左右=20px

如果您想在顶部使用20px，请将其替换为以下内容

padding: 20px 10px 20px 20px;

您还应更新最后第7行的代码：

[class*='col'] { float: left; padding: 10px; }

/* It should be the following - modify at will */
[class*='col'] { float: left; padding: 20px 10px 10px 10px; }

为你的CSS事业的未来提出建议

---

将来，如果类似的事情再次发生，浏览器的devtools将是调试CSS问题的天赐良机。在chrome、firefox和IE中，我认为你可以右键点击并选择“检查”。如果您想了解更多信息，请查阅有关如何使用浏览器开发工具的教程。

这是因为在css中，gallery网格元素大于包含它的元素，即行。所以它在容器外流动

要解决此问题，有一个clearfix黑客：-

只需将.clearfix类添加到所有行中，并将其定义为：

.clearfix {
  overflow: auto;
}

---

这将解决问题。

为什么它应该是20px？规则在哪里？请重新生成问题，并将JSFIDLE仅包含代码的特定部分。