Css 第一个div是否扩展到指定大小之外？

有四个项目，只显示一个背景图像，直到你看到，然后它显示文本，背景图像，然后设置为无

第一个元素的高度超出了其他三个元素的高度。我真的只是想让它们都保持在200x200px。所有用于背景的图像都是200x200px

.p1top的位置是否应该不同，例如绝对值

.p1top {
    height:200px;
    margin-left:45px;
    background-repeat: no-repeat;
    background-image: url(protect.png);
    width:200px;
    text-align:center;
    background-color:transparent;
    line-height: 0px;
    color: transparent;
    font-size: 16px;
    font-weight: 300;
    text-transform: uppercase;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}
.p1top :hover {
    height:200px !important;
    width:200px;
    background-image:none;
    background-color:#7D8093;
    line-height: 20px;
    color: #FFFFFF;
}
.p2top :hover {
    width:200px;
    background-image:none;
    background-color:#7D8093;
    line-height: 20px;
    color: #FFFFFF;
}
.p2top {
    background-repeat: no-repeat;
    background-image: url(build.png);
    float:left;
    margin-left:-15px;
    width:200px;
    text-align:center;
    background-color:transparent;
    line-height: 0px;
    color: transparent;
    font-size: 16px;
    font-weight: 300;
    text-transform: uppercase;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}
/*.p2top :hover {width:200px; background-color:#7D8093;line-height: 20px; color: #FFFFFF; }*/
 .p3top {
    background-repeat: no-repeat;
    background-image: url(savebg.png);
    margin-left: -20px;
    width:200px;
    text-align:center;
    background-color:transparent;
    line-height: 0px;
    color: transparent;
    font-size: 16px;
    font-weight: 300;
    text-transform: uppercase;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}
.p3top :hover {
    width:200px;
    background-color:#7D8093;
    line-height: 20px;
    color: #FFFFFF;
}
.p4top {
    background-repeat: no-repeat;
    background-image: url(help.png);
    margin-left: -20px;
    width:200px;
    text-align:center;
    background-color:transparent;
    line-height: 0px;
    color: transparent;
    font-size: 16px;
    font-weight: 300;
    text-transform: uppercase;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}
.p4top :hover {
    width:200px;
    background-color:#7D8093;
    line-height: 20px;
    color: #FFFFFF;
}

---

您只在

.p1top

中定义了高度，但在其他div中没有定义，因此您还需要设置该div height。然后您可以定义位置，例如绝对，但为此，您应该使用相对定位的div来包装所有这些div。如果您发布一个JSFIDLE，这将非常明智。

发布您的HTML，因为您的CSS可以应用于许多类型的布局。