margin-top不起作用？！

发布时间：2023-05-20

在CSS样式中，margin-top 是一个常用的属性，但是如果你发现它不起作用，那该怎么办呢？这是一个比较头疼的问题，今天我们就来一起探究一下这个问题。

一、margin-top属性

首先我们来看一下 margin-top 属性。通常情况下，margin-top 属性可以用来控制元素与其上面元素之间的距离。比如说，我们有一个元素，想要让它与上一个元素之间有一定距离，就可以设置 margin-top 属性的值为我们需要的距离。

.box {
    width: 100px;
    height: 100px;
    background-color: red;
    margin-top: 20px;
}

在上述代码中，我们设置了一个名为 box 的元素，宽度和高度均为 100px，并且设置了 margin-top 属性的值为 20px。如果一切正常，你应该能够看到这个元素距离上方元素有 20px 的距离。

二、margin-top失效原因

既然 margin-top 属性可以用来控制距离，那么什么情况下会出现不起作用的情况呢？ 首先我们需要注意的是，如果一个元素没有被设置为块级元素，那么它的 margin-top 属性是不会起作用的。比如说，如果我们想要给一个行内元素设置 margin-top 属性，就需要将它的 display 属性值设置为 block，比如说：

a {
    display: block;
    margin-top: 20px;
}

另一个常见的原因是，元素与其上一个元素之间存在 float 属性或绝对定位（position）属性。具体来说，如果一个元素上方存在一个带有 float 属性的元素，那么它的 margin-top 属性会失效。这是因为 float 属性会将元素从正常文本流中移出，使得它失去了与上方元素的连续性。同理，绝对定位的元素也会影响 margin-top 的效果。

三、margin-top用法

margin-top 属性的用法比较多样化，可以结合不同的值实现不同的效果。下面我们来简单介绍一下几种常见的用法。

1. px值

最常见的用法就是直接设置一个像素值。比如说，我们希望一个元素与它上方的元素间隔 20 个像素：

.box {
    width: 100px;
    height: 100px;
    background-color: red;
    margin-top: 20px;
}

2. em值

em 值是相对长度单位，它是相对于当前元素的字体大小计算的。如果我们在一个元素上设置 margin-top: 1em，那么它的距离就相当于当前元素字体大小的 1 倍。

.box {
    font-size: 16px;
    margin-top: 1em;
}

3. 百分比

百分比也是一种相对长度单位，它是相对于父元素的宽度计算的。比如说，我们在一个子元素上设置 margin-top: 20%，那么它的距离就相当于父元素宽度的 20%。

.parent {
    width: 200px;
}
.child {
    margin-top: 20%;
}

四、margin-top百分比

对于 margin-top 属性，百分比值有时会让人产生迷惑。为什么会有这种情况呢？ 其实，与其他属性不同，如果我们在给一个元素设置 margin-top 属性时，同时也给它的父元素设置了 padding-top 属性，那么百分比值就会相对于父元素的 padding-top 值计算，而不是相对于父元素的高度计算。

.parent {
    padding-top: 50px;
}
.child {
    margin-top: 20%;
}

在上述代码中，我们给父元素添加了 50px 的 padding-top 值，然后在子元素中设置 margin-top: 20%。实际上，子元素的距离不是 20% 的父元素高度，而是 20% 的父元素 padding-top 值。

五、margin-top和margin-bottom

在编写 CSS 样式时，我们可能会用到 margin-top 和 margin-bottom 属性。如果给一个元素同时设置了这两个属性，那么会发生什么呢？ 实际上，如果一个元素同时具有 margin-top 和 margin-bottom 属性，那么它们的距离会取两者之和作为结果。比如说，我们将 margin-top 的值设置为 20px，margin-bottom 的值设置为 30px，那么元素的上下间隔就是 50px。

.box {
    width: 100px;
    height: 100px;
    background-color: red;
    margin-top: 20px;
    margin-bottom: 30px;
}

六、layout margin-top

在编写 CSS 样式时，有时候会需要制作布局。在某些情况下，我们需要为一个元素设置 margin-top 属性来将它与上方元素分开。但是实际上，如果上方元素也具有类似的 margin 属性，那么它们之间的距离就会叠加，导致布局混乱。 为了解决这个问题，我们可以使用一个名为“layout margin-top”的技术。这个技术的本质是利用 margin-top 的“坍塌”效应，使得两个相邻的元素之间的间隔等于它们之间较大的 margin 值，而不是两者之和。

.clearfix::before,
.clearfix::after {
    content: "";
    display: table;
}
.clearfix::after {
    clear: both;
}
.Box {
    width: 100px;
    height: 100px;
    background-color: red;
    margin-top: 20px;
}
.Box2 {
    width: 100px;
    height: 100px;
    background-color: blue;
    margin-top: 30px;
}
.clearfix {
    margin-top: 20px;
}

在上述代码中，我们通过为 clearfix 伪元素添加 clear 属性，创建了一个“清除浮动”的效果。同时，我们也将 clearfix 元素设置了 margin-top: 20px 的值，这样 clearfix 与上方元素之间的间隔就是 20px。 接下来，我们在 clearfix 中添加了两个子元素，它们的 margin-top 属性分别为 20px 和 30px。由于 clearfix 具有“清除浮动”的效果，这两个子元素可以排成一行。此外，由于我们还为 clearfix 元素设置了 margin-top: 20px 的值，所以两个子元素之间的间隔就是它们两者之间较大的 margin 值（即 30px），而不是两者之和（即 20px + 30px = 50px）。

七、marginnote不好用

在使用 margin-top 属性时，我们有时会遇到一些问题，比如说 margin-top 值对齐不准确，或者在不同的浏览器中呈现效果不同。这时候，我们可以考虑使用一些其他的技术来代替 margin-top 属性的作用。 其中一个比较实用的技术就是 marginnote。它的基本思想是，在一个元素内部插入一个空的元素（比如说 span），然后通过为这个元素设置 margin 属性来实现距离控制。由于它不受与上方元素的位置关系的影响，所以可以避免一些之前提到的问题。

.box {
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
}
.Box span {
    position: absolute;
    top: -20px;
    left: 0;
    width: 0;
    height: 0;
    margin: 20px 0 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 20px solid red;
}

在上述代码中，我们为一个名为 box 的元素设置了 position: relative 的属性。然后，在它内部添加了一个 span 元素，通过对它的 margin 属性进行设置，实现了 20px 的距离控制。由于这个元素是绝对定位的，所以其位置与 box 元素的位置无关，从而避免了可能出现的问题。

总结

margin-top 属性是 CSS 样式中非常常用的一个属性，但有时会面临不起作用的问题。在本文中，我们从多个方面对这个问题进行了详细的阐述。同时，我们也介绍了一些常用的解决方案，希望能够对大家的开发工作有所帮助。

推荐文章