Question

我似乎无法弄清楚为什么我的垂直间距看起来比水平间距大。我需要应用隐藏的CSS样式吗？

以下是示例代码（下方或直接链接：https://www.w3schools.com/code/tryit.asp?filename=FGK16ROO32ZA）。您可以看到左右两边的单元格之间的空间很窄，但单元格顶部和底部之间的空间更大：

body {
  margin: 0px;
}

table,
th,
tr,
td {
  border: 0px;
  border-spacing: 0px;
  border-padding: 0px;
}

img {
  width: 128px;
  height: 128px;
}

<table>
  <tr>
    <th><img src="https://www.elie.net/image/public/1495321502/learn-web-security-with-google.png"></th>
    <th><img src="https://www.elie.net/image/public/1495321502/learn-web-security-with-google.png"></th>
    <th><img src="https://www.elie.net/image/public/1495321502/learn-web-security-with-google.png"></th>
  </tr>
  <tr>
    <td><img src="https://www.elie.net/image/public/1495321502/learn-web-security-with-google.png"></td>
    <td><img src="https://www.elie.net/image/public/1495321502/learn-web-security-with-google.png"></td>
    <td><img src="https://www.elie.net/image/public/1495321502/learn-web-security-with-google.png"></td>
  </tr>
  <tr>
    <td><img src="https://www.elie.net/image/public/1495321502/learn-web-security-with-google.png"></td>
    <td><img src="https://www.elie.net/image/public/1495321502/learn-web-security-with-google.png"></td>
    <td><img src="https://www.elie.net/image/public/1495321502/learn-web-security-with-google.png"></td>
  </tr>
</table>

Answer 1

您的图片下面有一个小间隙（descenders的剩余空间）。通过将其display属性设置为阻止或浮动它们来删除它：

＆＃13;

body {
  margin: 0px;
}

table,
th,
tr,
td {
  border: 0px;
  border-spacing: 0px;
}

img {
  width: 128px;
  height: 128px;
  display:block;
}

＆＃13;

<table>
  <tr>
    <th><img src="https://www.elie.net/image/public/1495321502/learn-web-security-with-google.png"></th>
    <th><img src="https://www.elie.net/image/public/1495321502/learn-web-security-with-google.png"></th>
    <th><img src="https://www.elie.net/image/public/1495321502/learn-web-security-with-google.png"></th>
  </tr>
  <tr>
    <td><img src="https://www.elie.net/image/public/1495321502/learn-web-security-with-google.png"></td>
    <td><img src="https://www.elie.net/image/public/1495321502/learn-web-security-with-google.png"></td>
    <td><img src="https://www.elie.net/image/public/1495321502/learn-web-security-with-google.png"></td>
  </tr>
  <tr>
    <td><img src="https://www.elie.net/image/public/1495321502/learn-web-security-with-google.png"></td>
    <td><img src="https://www.elie.net/image/public/1495321502/learn-web-security-with-google.png"></td>
    <td><img src="https://www.elie.net/image/public/1495321502/learn-web-security-with-google.png"></td>
  </tr>
</table>

＆＃13;

正如我在您对您的问题的评论中所指出的那样，没有边框填充属性，因此您可以删除它。

Answer 2

将此添加到table，th，tr，td {} css：

 padding: 2.5px 5px;

根据您的需要调整数字

https://www.w3schools.com/code/tryit.asp?filename=FGK1A71MO7PN

Answer 3

你可以添加填充：0 2px 0 2px;使它平稳。

body {
  margin: 0px;
}

table,
th,
tr,
td {
  border: 0px;
  border-spacing: 0px;
  padding: 0 2px 0 2px;
}
img {
  width: 128px;
  height: 128px;
}

<table>
  <tr>
    <th><img src="https://www.elie.net/image/public/1495321502/learn-web-security-with-google.png"></th>
    <th><img src="https://www.elie.net/image/public/1495321502/learn-web-security-with-google.png"></th>
    <th><img src="https://www.elie.net/image/public/1495321502/learn-web-security-with-google.png"></th>
  </tr>
  <tr>
    <td><img src="https://www.elie.net/image/public/1495321502/learn-web-security-with-google.png"></td>
    <td><img src="https://www.elie.net/image/public/1495321502/learn-web-security-with-google.png"></td>
    <td><img src="https://www.elie.net/image/public/1495321502/learn-web-security-with-google.png"></td>
  </tr>
  <tr>
    <td><img src="https://www.elie.net/image/public/1495321502/learn-web-security-with-google.png"></td>
    <td><img src="https://www.elie.net/image/public/1495321502/learn-web-security-with-google.png"></td>
    <td><img src="https://www.elie.net/image/public/1495321502/learn-web-security-with-google.png"></td>
  </tr>
</table>

Answer 4

除非您定义了高度和宽度值，否则

html表行和列是灵活的。我可以看到你给出的图像宽度和高度与原始图像的高度和宽度不成比例。我建议按照以下方式设置图像高度或宽度的样式。

import tkinter as tk

def input(prompt=''):
    win= tk.Tk()

    label= tk.Label(win, text=prompt)
    label.pack()

    userinput= tk.StringVar(win)
    entry= tk.Entry(win, textvariable=userinput)
    entry.pack()

    # pressing the button should stop the mainloop
    button= tk.Button(win, text="ok", command=win.quit)
    button.pack()

    # block execution until the user presses the OK button
    win.mainloop()

    # mainloop has ended. Read the value of the Entry, then destroy the GUI.
    userinput= userinput.get()
    win.destroy()

    return userinput

print(input('foobar'))

我希望这会帮助你。

表格比垂直表格更大的空间

4 个答案: