我正在尝试在表格元素和段落/链接元素之间创建空白区域。这是它目前的样子。
table first column table last column
table first row
table last row
link
这是我想要的样子
table last row
link
我试过很多不同的东西，但都没有用。我尝试嵌入 ruby 并添加\n 转义字符。我试过在我的段落元素中使用多个 break 标签。我什至尝试过选择元素并使用 margin-top 的 CSS 属性，这应该在元素之前创建空白。这是我的 CSS。
#submit {
background-color: blue;
color: #fff;
font-size: 1.3em;
margin-top: 50px;
text-decoration: none;
height: auto;
width: auto;
}
除了我最想要的 margin-top 之外，其他所有属性都有效。我什至尝试将 margin-bottom 添加到 table 元素，但这也没有用。作为引用，我也会发布我的表格 CSS。
#table {
text-align: left;
}
th {
background-color: #FFCC99;
&:hover {
background-color: #FFFF00;
};
}
#title, #console, #genre, #release {
background-color: #66FFFF;
&:hover {
background-color: #33FF00;
font-weight: bold;
};
我可以尝试继续用头撞砖墙，但我受够了，所以我在这里寻求帮助。
我直接从浏览器粘贴 HTML 到这里。
<!DOCTYPE html>
<html>
<head>
<title>Games</title>
</head>
<body>
<header class="navbar navbar-fixed-top navbar-inverse">
<div class="navbar-inner">
<div class="container">
<a href="#" id="logo">Games Database</a>
<nav>
<ul class="nav pull-right">
<li><a href="/games">Home</a></li>
<li><a href="/static_pages/help">Help</a></li>
<li><a href="/users/new">Sign up</a>
<li><a href="/signin">Sign in</a></li>
</ul>
</nav>
</div>
</div>
</header>
<h1><span id = "red">Games</span> <span id = "yellow">Database</span></h1>
<table>
<thead>
<tr>
<th id = "title_id"><a href="/games?sort=title">Title</a></th>
<th id = "console_id"><a href="/games?sort=console">Console</a></th>
<th id = "genre_id"><a href="/games?sort=genre">Genre</a></th>
<th id = "release_id"><a href="/games?sort=released_on">Release Date</a></th>
</tr>
</thead>
<tbody>
<tr>
<div class = color>
<td id = "title">Tetris</td>
<td id = "console">NES</td>
<td id = "genre">Puzzle</td>
<td id = "release">1984</td>
</div>
<td><a href="/games/16">Show</a></td>
<td><a href="/games/16/edit">Edit</a></td>
<td><a data-method="delete" href="/games/16" rel="nofollow">Delete</a></td>
</tr>
<tr>
<div class = color>
<td id = "title">Wii Sports</td>
<td id = "console">Wii</td>
<td id = "genre">Sports</td>
<td id = "release">2006</td>
</div>
<td><a href="/games/17">Show</a></td>
<td><a href="/games/17/edit">Edit</a></td>
<td><a data-method="delete" href="/games/17" rel="nofollow">Delete</a></td>
</tr>
<tr>
<div class = color>
<td id = "title">Super Mario Bros.</td>
<td id = "console">NES</td>
<td id = "genre">Platform</td>
<td id = "release">1985</td>
</div>
<td><a href="/games/18">Show</a></td>
<td><a href="/games/18/edit">Edit</a></td>
<td><a data-method="delete" href="/games/18" rel="nofollow">Delete</a></td>
</tr>
<tr>
<div class = color>
<td id = "title">Mario Kart Wii</td>
<td id = "console">Wii</td>
<td id = "genre">Racing</td>
<td id = "release">2008</td>
</div>
<td><a href="/games/19">Show</a></td>
<td><a href="/games/19/edit">Edit</a></td>
<td><a data-method="delete" href="/games/19" rel="nofollow">Delete</a></td>
</tr>
<tr>
<div class = color>
<td id = "title">Grand Theft Auto V</td>
<td id = "console">Playstation 3</td>
<td id = "genre">Action_adventure</td>
<td id = "release">2013</td>
</div>
<td><a href="/games/23">Show</a></td>
<td><a href="/games/23/edit">Edit</a></td>
<td><a data-method="delete" href="/games/23" rel="nofollow">Delete</a></td>
</tr>
<tr>
<div class = color>
<td id = "title">Minecraft</td>
<td id = "console">Microsoft Windows</td>
<td id = "genre">Sandbox</td>
<td id = "release">2009</td>
</div>
<td><a href="/games/24">Show</a></td>
<td><a href="/games/24/edit">Edit</a></td>
<td><a data-method="delete" href="/games/24" rel="nofollow">Delete</a></td>
</tr>
<tr>
<div class = color>
<td id = "title">Call of Duty: Modern Warfare 2</td>
<td id = "console">Xbox360</td>
<td id = "genre">First Person Shooter</td>
<td id = "release">2009</td>
</div>
<td><a href="/games/25">Show</a></td>
<td><a href="/games/25/edit">Edit</a></td>
<td><a data-method="delete" href="/games/25" rel="nofollow">Delete</a></td>
</tr>
<tr>
<div class = color>
<td id = "title">Metroid</td>
<td id = "console">NES</td>
<td id = "genre">Action-adventure</td>
<td id = "release">1986</td>
</div>
<td><a href="/games/28">Show</a></td>
<td><a href="/games/28/edit">Edit</a></td>
<td><a data-method="delete" href="/games/28" rel="nofollow">Delete</a></td>
</tr>
</tbody>
</table>
<p>
<break>
<a href="/games/new" id="submit">Add a new game</a>
</p>
<div class = "footer">
<a href="/games">Home</a>
<a href="/static_pages/about">About</a>
<a href="/static_pages/contact">Contact</a>
</div>
</body>
</html>
最佳答案
只是在此处猜测而没有看到您的 HTML，但您可能需要将链接设置为 display: block 或 display: inline-block 以应用边距。
默认情况下， anchor 元素设置为display: inline，上/下边距不适用于内联元素。
关于CSS - Margin Top 属性不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24112388/