CSS填充和边距不起作用

Question

我遇到以下代码的问题。我无法从顶部向下填充徽标（x12creatiΩns）。我已经尝试了top:10px，但它没有做任何事情。

HTML

<div id='header'>
<span id='logo'>
    <a href="index.php" id="logo" class="menu" rel="menu">x12creati&Omega;ns</a>
</span>
<span id='sublogo'>Just another portfolio...</span>
</div>`

CSS

span#logo {
font-size:2.2em;
color: black;
padding-left:10px;
text-shadow:0px 1px 0px white;
top:10px;
}

a#logo {
text-decoration: none;
color: black;
}

a#logo:hover {
padding-top:10px;
text-decoration: none;
color: #555;
}

div#header {
background-color:#DDD;
width:100%;
height:44px;
border-bottom-style:solid;
border-bottom-width:1px;
border-bottom-color:#CCC; 
}

Answer 1

尝试取消a

喜欢这个

#logo:hover{}

或者，如果您需要访问锚点，请尝试此

#logo a:hover{}

Answer 2

将display: inline-block添加到a#logo - http://jsfiddle.net/tmaHx/1/ - 然后您可以使用边距/填充

a#logo {
    text-decoration: none;
    color: black;
    display: inline-block;
    margin-top: 20px
}

Answer 3

将display:inline-block添加到您的span#logo声明中，然后只需添加一些上边距即可。此外，您要重复两次“徽标”ID;进入span标记，再次放入徽标a标记后，即无法验证。

Answer 4

因为a是内联元素，您必须添加display:block;，然后您可以添加边距和填充！