Question

我试图在表格元素和段落/链接元素之间创建空格。这是目前的样子。

table first column           table last column
table first row




table last row
link

这就是我想要的样子

table last row


link

我尝试了很多不同的事情，但没有一个能奏效。我尝试了嵌入式ruby并添加\ n转义字符。我尝试在我的段落元素中使用多个break标记。我甚至尝试选择元素并将margin属性用于margin-top，它应该在元素之前创建空白区域。这是我的css。

#submit {
background-color: blue;
color: #fff;
font-size: 1.3em;
margin-top: 50px;
text-decoration: none;
height: auto;
width: auto;
}

除了我最想要的边缘之外，其他所有财产都有效。我甚至尝试在表元素中添加margin-bottom，但这也没有用。作为参考，我也会发布我的表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>

Answer 1

只是在这里猜测而不会看到您的HTML，但您可能需要设置指向display: block或display: inline-block的链接，以便申请保证金。

默认情况下，锚元素设置为display: inline，而上/下边距不适用于内联元素。

CSS - Margin Top属性不起作用

1 个答案: