margin-top不起作用？！

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

一、margintop属性

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

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

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

二、margintop失效原因

既然margin-top属性可以用来控制距离，那么什么情况下会出现不起作用的情况呢？

首先我们需要注意的是，如果一个元素没有被设置为块级元素，那么它的margin-top属性是不会起作用的。比如说，如果我们想要给一个行内元素设置margin-top属性，就需要将它的display属性值设置为block，比如说：

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

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

三、margintop用法

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%;
}

四、margintop百分比

对于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 margintop

在编写CSS样式时，有时候会需要制作布局。在某些情况下，我们需要为一个元素设置margin-top属性来将它与上方元素分开。但是实际上，如果上方元素也具有类似的margin属性，那么它们之间的距离就会叠加，导致布局混乱。

为了解决这个问题，我们可以使用一个名为“layout margintop”的技术。这个技术的本质是利用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样式中非常常用的一个属性，但有时会面临不起作用的问题。在本文中，我们从多个方面对这个问题进行了详细的阐述。同时，我们也介绍了一些常用的解决方案，希望能够对大家的开发工作有所帮助。