前段项目遇到的问题-外边距塌陷及图片边框问题

目录

一、图片边框问题

二、外边距塌陷问题

---

一、图片边框问题

------图片伪元素hover加边框后出现下移问题

代码如下：

.sk_bd ul li {
    float: left;
    width: 290px;
    height: 460px;
}
.sk_bd ul li:hover {
    border: 1px solid #c81523;
}

------解决方法：将其原来的盒子添加透明边框

代码如下：

.sk_bd ul li {
    float: left;
    width: 290px;
    height: 460px;
    border：1px solid  transparent;
}

二、外边距塌陷问题

• 当 大盒子里边小盒子给margin-top会出现外边距合并  

 例如：

 <div class="out">
        <div class="in"></div>
    </div>

 .out {
            width: 100%;
            height: 300px;
            background-color: pink;
        }
        
        .out .in {
            width: 100%;
            height: 100px;
            background-color: #fd2;
            margin-top: 100px;
        }

此时给div盒子margin-top就会出现外边距合并，会整体下移，此时整体下移了100px

•  解决办法

 将margin-top改为padding-top

例如这个例子

.out{
           
            width: 100%;
            height: 300px;
            background-color: pink;
            padding-top: 100px;
        }

 此时不会出现外边距塌陷，便可以将黄色盒子向下移动100px