如何将DIV元素向顶部移动一点

Question

我的主页链接图片存在问题，我已为我的悬停导航栏编码。我博客的网址如下：http://www.blankesque.com。理想情况下，我希望图像与旁边的标签文字一致，但无论我做什么，我似乎无法移动＆＃34; home＆＃34;图标略微上升。我试图用填充和边距值来玩，但无济于事。我只需要将图像移动到顶部约15px，但我无法弄清楚如何去做。我在下面包含了html和css编码：

#wctopdropcont { 
width:100%;
height:45px;
display:block;
padding: 5.5px 0 0 0;
z-index:100;
top:-2px;
left: 0px;
position:fixed;

background:#f8f8f8;
opacity: 0.9;
filter: alpha(opacity=90);
 }
</style>

<div id='wctopdropcont'>

<ul>
<li><a href='http://www.blankesque.com'><img alt='Home' height='30px' src='http://i1379.photobucket.com/albums/ah140/mynamesiram/Mobile%20Uploads/520FDB25-EAD9-4BB0-B621-B1BFE3B558A9_zpsua6eoor2.gif' width='30px'/></a></li> 
</ul></div>

Answer 1

快速入侵可能就是这样：

将以下属性添加到您的主页图标中：

margin: -10px;

但是，为了保持您的css 更易于维护，我建议您找出图片未正确对齐的原因。为此，您可以使用Chrome开发者工具或Firebug等浏览器工具。

检查主页按钮时，您会看到

• 添加了5 px的填充，因为您在#wctopdropnav li a中定义了它，＃wctopdropnav li a：link
• 您在#wctopdropnav li
中定义的填充

要正确解决此问题，请重新考虑您为菜单设置样式的方式，以便文本链接有一些填充，但图像不会。

Answer 2

这是因为原生的ul和li margin / padding。您可以专门为img使用负上边距。

#wctopdropnav ul li a img {margin-top:-13px;}

如果要在顶部导航中添加更多img，可以在主图标图像中添加一个类/ id，并将CSS专门添加到该类。

Answer 3

大多数问题是因为#wctopdropnav li有这个：

padding:10px 6.5px 6.5px 6.5px

填充为原始元素的宽度和高度添加宽度和高度，这不会导致文本链接出现问题，因为它没有那么多，但是图像就成了问题

删除填充li项，并提供#wctopdropnav li a

line-height:35px;

问题已解决！

Answer 4

不要使用任何边距和东西。

问题是你的img上有填充。

设置填充：0;只有在第一个李，它会没事的。

#wctopdropnav li:first-child { padding: 0; }