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

Question

我有以下内容:

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

样式如下:

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

除此之外，我还有一些 javascript 技巧，通过设置 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< 的space/ 属性。

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