如何设置容器div的宽度和高度？

Question

我有以下内容：

<div id="container">
    <img src="pic.png">
</div>

其风格如下：

#container {
    height: 50px;
    width: 50px;
}

除此之外，我还有一些javascript hackery，通过设置margin-top和margin-left，使图片显示在包含div中的死点。

当我在Chrome网络检查器中查看此信息时，显然包含的div不会从其父级的顶部开始。我怀疑图像是相对于容器div的父级定位的。

这样做的问题在于我希望容器div成为点击事件的目标，例如拖动。 div只在图像的顶部开始，当我希望它从图像上方开始时，并将边距空间作为容器的一部分。有什么建议吗？

Answer 1

@plalx对你使用错误的选择器你应该这样做：

#container{
    width: 50px;
    height: 50px;
    padding: 5px;
}

padding是你想要使div大于点击图像的东西。 margin确定页面上的位置，padding确定超出height和width属性的页面上的空间。

见http://jsfiddle.net/VRJUc/。如果你打开元素检查器（chrome）并查看div的实际大小，你会发现它实际上是60x60，因为我已经为每一侧添加了5px填充。