将margin-bottom应用于元素

Question

我尝试使用margin-bottom定位div元素。由于某种原因，边距底部似乎不会影响元素的位置。我试着寻找答案，虽然所有的答案都与position:absolute有关，但我仍然无法让它发挥作用。

然而，我确实设法使用负边缘顶部来定位它，但我仍然很想知道导致它无法工作的原因。

继承显示HTML / CSS的fiddle （我所说的是图像。边距底部设置为100px。）

Answer 1

尝试使用类“productImage”将位置绝对属性放在DIV中。像这样，例如：

.productImage {
    display: block;
    float: left;
    position: absolute;
    left: 450px;
    top: 60px;
}

使用这个我成功地操纵了图像。我希望它可以帮到你。

Answer 2

考虑添加display: block。

Answer 3

底部的边距只有在元素以某种方式通过底部定位时才有效。现在，它的定位基于它的顶部，并由H1设定。如果您不希望H1成为块，请将其设置为display:inline-block。您还可以将宽度设置为段落的宽度。

正如您所指出的，这就是负边缘效应的原因。

Answer 4

使用以下其中一项：

• 否定（或更小）margin-top
• position: relative和否定top

进一步解释：

在普通文档流程中，

margin-bottom只会影响后面元素的位置，因为普通的块级元素会随着子节点的高度扩展它们的高度。因此，元素的位置由它之前的元素以及它自己的margin-top确定。