Html 表单元格中不需要的空间
我有一个3行3列的表。第一行和第三行横跨所有3列。它由7个图像组成，第一行1个，第二行3个，第三行3个 我的问题是第二排和第三排的左单元格。在第二行，左侧单元格在表格的左边框和图像之间有大约6个像素的空间。图像没有额外的空间作为图像的一部分，我编写的css在表或单元格上没有指定边距，在表或单元格上没有填充或边框间距，在图像上没有填充。我不知道这个空间是从哪里来的，也不知道如何摆脱它 在第三行，所有3个图像都包含在一个单元格内，该单元格跨越3个单元格的宽度。图像居中，并且应该是行的高度。每个图像左右各有5个像素的间距，但顶部和底部没有间距。它们也应该是垂直居中对齐的。中心图像小于另一个2，应该位于两个相同大小的图像的顶部和底部之间，但是它位于细胞的顶部和底部之间，并且在图像的底部和细胞的底部之间有大约6个像素空间。同样，表格单元格没有填充和边框间距 我已经创建了一个JSFIDLE来显示它，但是图像不在那里，因为页面在任何地方都不在线。alt标记中的第三行文本不显示文本底部和单元格底部之间的空间，但第二行的左侧单元格在开始该图像alt文本的S之前显示一个空间。文本中该位置没有空格，因此我认为它显示了我所指的不必要的空格 我能做些什么来消除这种不必要和不必要的间距？另外，请原谅我的CSS写作风格。我对CSS还是有点陌生，并且还在学习它。同样，第1行和第2行的右侧图像也会按应有的方式显示。第二行的中间单元格没有居中，直到我为左侧单元格指定了宽度 这是该表的一个图像，并指向包含该表的html和css的JSFIDLE。好的，看来我必须在这条消息中放置代码，下面是JSFIDLE中出现的CSS和HTML： CSS HTML 编辑：我在发布这篇文章后去了JSFIDLE，现在第二行左侧单元格的空格不在了。我不知道为什么我什么都没改变，它却变了。这样做真的很糟糕。这里有另一种方法。 我已经使用了网格，如果您需要帮助，请单击以获取网格的完整指南 HTMLHtml 表单元格中不需要的空间,html,css,Html,Css,我有一个3行3列的表。第一行和第三行横跨所有3列。它由7个图像组成，第一行1个，第二行3个，第三行3个 我的问题是第二排和第三排的左单元格。在第二行，左侧单元格在表格的左边框和图像之间有大约6个像素的空间。图像没有额外的空间作为图像的一部分，我编写的css在表或单元格上没有指定边距，在表或单元格上没有填充或边框间距，在图像上没有填充。我不知道这个空间是从哪里来的，也不知道如何摆脱它 在第三行，所有3个图像都包含在一个单元格内，该单元格跨越3个单元格的宽度。图像居中，并且应该是行的高度。每个图像左
我决定将此作为答案发布，因为它值得注意。始终确保检查行尾是否有多余的空格字符。如果它不打算在那里，它将导致您的显示问题。我的桌子有两个问题，并且有不同的修正 对于第二行的左侧单元格，它只是紧跟在TD的右括号>之后的一个空格字符，导致单元格边界和图像之间出现空格
对于第三行，它是图像底部的透明背景。这些区域包含的文本是黑色的，如果不仔细检查，你是看不到的。修复方法是设置背景色：aliceblue；在我的例子中，因为我更喜欢aliceblue而不是白色。第二行的中间单元格仍然偏离第一行和第三行图像的中心，因此我仍然必须使用宽度：284px；在左侧单元格上，使中间单元格居中。请使用JSFIDLE或use中图像的完整路径。它的外观与您希望的一样，我将查看dummyimage。该网站目前仅在我的硬盘上，因此无法直接链接图像。这对我来说是一个问题，但我不知道如何使用我刚才为您链接的带有虚拟图像的JSFIDLE。我刚刚在我之前制作的JSFIDLE中添加了虚拟图像。它不仅显示正确，而且我必须将添加到第二行左侧单元格的宽度从284px减小到204px，中间图像位于底部图像上方的中心。我不明白发生了什么事。我没有改变任何关于CSS的内容，如果你看看我在原始帖子中发布的图片，你可以看到左边图片左侧和底部图片下方的空间。有什么线索吗？你只是给他看了一个基本的网格。你改变了他的图像的高度和宽度。展示一个工作示例，其元素定位与他想要的相同，我感谢您的帮助。我知道我可能会因此而受到抨击，但我从来没有在跳水方面有过好运气。桌子对我来说总是最好的。这是我第一次遇到这个问题。当我开始将属性和字体标记更改为CSS时，我就开始遇到
使页面看起来相同的问题。在大多数情况下，我已经成功了，不过如果您将CSS版本与旧版本进行比较，有几页看起来略有不同。这是我第一次在表格单元格中有我无法消除的多余空间。如果有可能画出你想要的图层，那会更容易一些。我不知道你的意思。这是一个有3行的单表。第一行是横跨表格宽度的单个单元格。第二行通过创建3个单元格来定义宽度。第三行也跨越了表格的宽度。我看不出这里有任何分层。如果我把标签分开，使每个TR和TD都在一条单独的线上，会有帮助吗？我的任务是用www.figma.com创建UI。
.img {
vertical-align:middle;
margin:0;
padding:0 5px 0;
}
.img2 {
vertical-align:middle;
margin:0;
padding:0;
}
table {
border:0;
padding:0;
border-spacing:0;
}
.table1 {
width:100%;
}
.table2 {
margin:auto;
}
.tr1 {
vertical-align:top;
}
.td1 {
margin:0 0 0 0;
border-spacing:0;
padding:0 0 0 0;
width:284px;
border:1px solid;
vertical-align:top;
text-align:left;
font-family:Calibri;
font-size:1em;
}
.td2 {
margin:0 0 0 0;
border-spacing:0;
padding:0 0 0 0;
border:1px solid;
vertical-align:middle;
text-align:center;
font-family:Calibri;
font-size:1em;
}
.td3 {
margin:0 0 0 0;
border-spacing:0;
padding:0 0 0 0;
border:1px solid;
vertical-align:middle;
text-align:right;
font-family:Calibri;
font-size:1em;
}
<TABLE class="table1 table2">
<TR><TD class="td2" colspan=3>
<A href="https://rads.stackoverflow.com/amzn/click/com/B000IU3YA0" rel="nofollow noreferrer"
target="_blank"><IMG class="img2" src="Images/Tofu/468_60.gif"
width=468 height=60
alt="Soundtrack horizontal banner"
title="Soundtrack horizontal banner"></A>
</TD></TR><TR class="tr1"><TD class="td1">
<A href="https://rads.stackoverflow.com/amzn/click/com/B000IU3YA0" rel="nofollow noreferrer"
target="_blank"><IMG class="img2" src="Images/Tofu/120-240.gif"
width=120 height=240
alt="Soundtrack wide vertical banner"
title="Soundtrack wide vertical banner"></A>
</TD><TD class="td2">
<A href="https://rads.stackoverflow.com/amzn/click/com/B000IU3YA0" rel="nofollow noreferrer"
target="_blank"><IMG class="img2" src="Images/Tofu/120_90.gif"
width=120 height=90
alt="Soundtrack small banner"
title="Soundtrack small banner"></A>
</TD><TD class="td3">
<A href="https://rads.stackoverflow.com/amzn/click/com/B000IU3YA0" rel="nofollow noreferrer"
target="_blank"><IMG class="img2" src="Images/Tofu/95.jpg"
width=95 height=95
alt="Soundtrack square banner"
title="Soundtrack square banner"></A>
</TD></TR><TR class="tr1"><TD class="td2" colspan=3>
<A href="https://rads.stackoverflow.com/amzn/click/com/B000IU3YA0" rel="nofollow noreferrer"
target="_blank"><IMG class="img" src="Thumbnails/Tofu/icon_50.gif"
width=50 height=60
alt="Soundtrack promotion button"
title="Soundtrack promotion button"></A>
<A href="http://www.tofurecords.com/artists.php?artistid=ffxii"
target="_blank"><IMG class="img" src="Thumbnails/Tofu/TOF033_cover.jpg"
width=30 height=30
alt="Soundtrack promotion button"
title="Soundtrack promotion button"></A>
<A href="https://rads.stackoverflow.com/amzn/click/com/B000IU3YA0" rel="nofollow noreferrer"
target="_blank"><IMG class="img" src="Thumbnails/Tofu/website_icon.gif"
width=50 height=60
alt="Soundtrack official website button"
title="Soundtrack official website button"></A>
</TD></TR>
</TABLE>
<div class="grid-container">
<div class="row1">
<div class="Soundtrack">
<a href="https://rads.stackoverflow.com/amzn/click/com/B000IU3YA0" rel="nofollow noreferrer" target="_blank">
<img id="img2" src="Images/Tofu/468_60.gif" alt="Soundtrack horizontal banner" title="Soundtrack horizontal banner" />
</a>
</div>
</div>
<div class="row2">
<div class="Soundtrack">
<div>
<a href="https://rads.stackoverflow.com/amzn/click/com/B000IU3YA0" rel="nofollow noreferrer" target="_blank">
<img class="img2" src="Images/Tofu/120-240.gif" style="width: 120px; height: 240px;" alt="Soundtrack wide vertical banner" title="Soundtrack wide vertical banner" />
</a>
</div>
<div>
<a href="https://rads.stackoverflow.com/amzn/click/com/B000IU3YA0" rel="nofollow noreferrer" target="_blank">
<img class="img2" src="Images/Tofu/120-240.gif" style="width: 120px; height: 240px;" alt="Soundtrack wide vertical banner" title="Soundtrack wide vertical banner" />
</a>
</div>
<div>
<a href="https://rads.stackoverflow.com/amzn/click/com/B000IU3YA0" rel="nofollow noreferrer" target="_blank">
<img class="img2" src="Images/Tofu/120-240.gif" style="width: 120px; height: 240px;" alt="Soundtrack wide vertical banner" title="Soundtrack wide vertical banner" />
</a>
</div>
</div>
</div>
<div class="row3">
<a href="https://rads.stackoverflow.com/amzn/click/com/B000IU3YA0" rel="nofollow noreferrer" target="_blank">
<img class="img2" src="Images/Tofu/120-240.gif" style="width: 120px; height: 240px;" alt="Soundtrack wide vertical banner" title="Soundtrack wide vertical banner" />
</a>
<a href="https://rads.stackoverflow.com/amzn/click/com/B000IU3YA0" rel="nofollow noreferrer" target="_blank">
<img class="img2" src="Images/Tofu/120-240.gif" style="width: 120px; height: 240px;" alt="Soundtrack wide vertical banner" title="Soundtrack wide vertical banner" />
</a>
<a href="https://rads.stackoverflow.com/amzn/click/com/B000IU3YA0" rel="nofollow noreferrer" target="_blank">
<img class="img2" src="Images/Tofu/120-240.gif" style="width: 120px; height: 240px;" alt="Soundtrack wide vertical banner" title="Soundtrack wide vertical banner" />
</a>
</div>
</div>
html,
body,
.grid-container {
height: 100%;
margin: 0;
}
.grid-container {
margin: 12px;
border: 2px solid gray;
display: grid;
grid-template-columns: 1fr 0.9fr 1.1fr;
grid-template-rows: 1fr 1fr 1fr;
gap: 1px 1px;
grid-template-areas: "row1 row1 row1" "row2 row2 row2" "row3 row3 row3";
}
.row1 {
grid-area: row1;
justify-items: center;
}
.row1 > div {
border-bottom: 2px solid gray;
}
.row2 {
grid-area: row2;
}
.Soundtrack {
display: grid;
grid-auto-flow: column;
justify-items: center;
}
.row2 > div > div {
display: grid;
justify-items: center;
}
.Soundtrack > div {
border: 2px solid gray;
width: 100%;
border-right: 0px;
}
a {
text-decoration: none;
}
.row3 {
grid-area: row3;
border-top: 2px solid gray;
display: grid;
grid-auto-flow: column;
justify-content: center;
grid-gap: 30px;
}