Question

我正在尝试通过div标签的边距移动img，但是没有用。所以我然后做了桌子，尝试了一下，但仍然无法正常工作。唯一有效的方法是将margin设置为img槽ID。

<div id="games">
        <table>
            <thead>
                <h1>OUR GAMES</h1>
            </thead>
            <tbody>
                <tr>
                    <td><img id="crusader" src="stronghold-crusader-cover.jpg"></td>
                    <td><img id="dvojka" src="stronghold2-cover.jpg"></td>
                    <td><img id="warlords" src="stronghold-warlords-cover.jpg"> </td>
                </tr>
            </tbody>
        </table>
    </body>

td{
    margin: auto;
}
#crusader{
    margin-top: 5%;
    height: 300px;
    width: 200px;
    margin-right: 50px; 
}
#dvojka{
    margin-top: 5%;
    height: 300px;
    width: 200px;
    margin-right: 50px;
}
#warlords{
    margin-top: 5%;
    height: 300px;
    width: 200px;
}

Answer 1

问题是您试图将百分比设置为边距，而元素的父级没有大小。这是行不通的，因为5％的东西什么都不是。

td{
    margin: auto;
    width:10%;
    height:10%;
}
#crusader{
    margin-top: 105%;
    height: 300px;
    width: 200px;
    margin-right: 50px; 
}
#dvojka{
    margin-top: 5%;
    height: 300px;
    width: 200px;
    margin-right: 50px;
}
#warlords{
    margin-top: 14px;
    height: 300px;
    width: 200px;
}

<div id="games">
        <table>
            <thead>
                <h1>OUR GAMES</h1>
            </thead>
            <tbody>
                <tr>
                    <td><img id="crusader" src="stronghold-crusader-cover.jpg"></td>
                    <td><img id="dvojka" src="stronghold2-cover.jpg"></td>
                    <td><img id="warlords" src="stronghold-warlords-cover.jpg"> </td>
                </tr>
            </tbody>
        </table>
    </body>

我已将其中一张图像设置为105％，以使页边距显而易见。请注意，由于表是一个块元素，因此我在td上添加了页边距大小，它占用了全部空间，因此具有一定的大小。当您为td设置大小（甚至百分比）时，可以为imgs设置百分比的边距

页边距不适用于div，表格和其他父项元素

1 个答案: