尽管我删除了填充，但幽灵填充仍然出现在 td 中
发布于2024-11-03 20:30 阅读(1035) 评论(0) 点赞(29) 收藏(2)
我正在尝试使用表格来制作棋盘，因此想消除td元素之间的任何填充：
但是，他们得到了填充8px，并且开发人员工具说它是从我的类继承的noPadding：
这没有任何意义...我该如何解决这个问题？
其余部分（CSS如果相关）：
.noPadding {
padding: 0px;
}
html {
height: 100vh;
width: 100%;
margin: 0px;
}
body {
height: 100%;
height: 100%;
margin: 0px;
}
.container-fluid {
background-image: url(baggrunn.jpg);
background-repeat: no-repeat;
background-size: cover;
height: 100%;
width: 100%;
}
.thinBorder td,
.thinBorder th,
.thinBorder tr {
border: solid #000 1px;
padding: 0;
margin: 0;
}
.borderless td,
.borderless th,
.borderless tr {
border: none;
padding: 0;
margin: 0;
}
.noBordersBruh table td,
.noBordersBruh th {
display: block;
border-collapse: collapse;
border-spacing: 0;
box-sizing: border-box;
}
.top20 {
padding-top: 15px;
width: 100%;
font-size: 20px;
font-weight: bold;
}
.glyphicon {
font-size: 20px;
}
.noPadding {
padding: 0px;
}
.noMargin {
margin: 0px;
}
.herregudbredde {
width: 12.5%;
}
.fullBredde {
width: 100%;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table borderless noBordersBruh col-md-12" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="noPadding"><img class="img-responsive fullBredde borderless noBordersBruh" src="Content/ikonene/felt1.png" alt="A8"></td>
<td class="noPadding"><img class="img-responsive fullBredde borderless noBordersBruh" src="Content/ikonene/felt2.png" alt="B8"></td>
<td class="noPadding"><img class="img-responsive fullBredde borderless noBordersBruh" src="Content/ikonene/felt1.png" alt="C8"></td>
<td class="noPadding"><img class="img-responsive fullBredde borderless noBordersBruh" src="Content/ikonene/felt2.png" alt="D8"></td>
<td class="noPadding"><img class="img-responsive fullBredde borderless noBordersBruh" src="Content/ikonene/felt1.png" alt="E8"></td>
<td class="noPadding"><img class="img-responsive fullBredde borderless noBordersBruh" src="Content/ikonene/felt2.png" alt="F8"></td>
<td class="noPadding"><img class="img-responsive fullBredde borderless noBordersBruh" src="Content/ikonene/felt1.png" alt="G8"></td>
<td class="noPadding"><img class="img-responsive fullBredde borderless noBordersBruh" src="Content/ikonene/felt2.png" alt="H8"></td>
</tr>
</tbody>
</table>解决方案
确保.noPadding该类覆盖为表元素定义的 Bootstrap 的“.table”类填充。
我无法测试你的代码，但其中一些 CSS 规则应该可以起作用：
简单的：
.noPadding {
padding: 0 !important;
}
或者，避免该!important指令：
.noPadding,
.table>thead>tr>th.noPadding,
.table>tbody>tr>td.noPadding,
{
padding: 0;
}
您可能需要添加更多选择器来覆盖该类.table，如 Imgur 屏幕截图所示。
所属网站分类: 技术文章 > 问答
作者：黑洞官方问答小能手
链接：http://www.qianduanheidong.com/blog/article/534760/a684271f05852cbf0652/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力