a标签嵌套div标签时为什么两个块会错位？？

来源：3-8 过渡和变形在实战中的应用（1）

慕仙2169824

2021-01-13 09:36:56

图片描述

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="a标签嵌套div时面积错位.css">
</head>
<body>
    <a href="">
        <div>
            <p>查看更多</p>
            <p>机酒自由行产品</p>
            <p class="iconfont">&#xe602;</p>
            <p>机票 | 酒店 | 机+酒 | 邮轮</p>
        </div>
    
    </a>
</body>
</html>

相关代码：


/* 每个版块最后的《查看更多》格子 */
/* 宽度和背景颜色是自由变量,其余是固定参数 */
a{
    display: block;
    height: 270px;
    width: 264px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.08);
    background-image: linear-gradient(180deg, #34E3BC 0%, #15AF7A 98%);
    text-decoration: none;
}



/* 里面文字的样式 */
a div{
    
    height: 178px;
    color: white;
    line-height: 22px;
    font-size: 14px;
    text-align: center;
    /* 下面2个是变量,当地玩乐部分需要改动 */
    width: 236px;
    margin: 46px 14px;
    
}

a div .iconfont{
    line-height: 48px;
    font-size: 48px ;
    margin-top: 28px;
    margin-bottom: 36px;
}

 a>div p:last-child{
    letter-spacing: 1px;
}

/* "查看更多"格子的个性样式 */
/* a{
    display: block;
    background-image: linear-gradient(180deg, #FF6374 1%, #FF7368 98%);
    width: 364px;
} */

/* "查看更多"格子的里文字盒子的个性样式 */
/* 按照公共类部分的提示设置个性变量 */
/* a div{
    width: 310px;
    margin: 46px 27px;
   
} */




/* 给<查看更多>小格子设置特效动画 */
/* 定义动画 */
@keyframes more-grid-donghua {
    from{
        transform: translateY(-10px);
    }
    to{
        transform: translateY(10px);
    }
}

/*调用动画 */
a:hover .iconfont{
    animation: more-grid-donghua 0.4s ease 0s infinite alternate ;
}

写回答

1回答

好帮手慕夭夭

2021-01-13

已采纳

同学你好，这里有一个特殊现象，可以固定记一下：当父元素没有padding-top或者border-top的情况下，子元素设置margin-top，父元素也会与子元素一起产生一个上间距，这种现象可以叫做margin塌陷。这里子元素div设置了上间距为46px，父元素a虽然没有设置上间距，但是会和子元素一起与页面顶部产生46px的间距，所以div和a会错位。如下图所示：