填充不适用于 div 图标

Padding not working for divs icons

我正在尝试向我的 .slotIcon class 添加填充。我的 .slots class 是容器, 是与另一个 div 的内联块,试图使两个 div 并排(50% 宽度)。

这些都在 "work" 部分。

现在填充不会影响图标,边距会移动整个 .slots div。

我想做的只是稍微降低图标和文本,在 .slots div.

https://jsfiddle.net/js1rgh4b/1/

 <div  class="work" >
    <h2>Work</h2>

    <div class="slots">

        <div class="slotIcon"></div>
            <p>Slots</p>
    </div><div class="OEA">

        <div class="OEAicon"></div>
            <p>OEA</p>
    </div>

</div>

Css:

.slots {
display: inline-block;
width: 50%;
height: 350px;
background-color: #3484ce;
}



.OEA {
display: inline-block;
width: 50%;
height: 350px;
background-color: green;
}

.slotIcon {
width: 150px;
height: 159px;
background-repeat: no-repeat;
background-image: url(http://media.idownloadblog.com/wp-content/uploads/2013/07/Imgur-1.0-for-iOS-app-icon-small.png);
margin-left: auto;
margin-right: auto;
}



.OEAicon {
width: 200px;
height: 159px;
background-repeat: no-repeat;
background-image: url(http://media.idownloadblog.com/wp-content/uploads/2013/07/Imgur-1.0-for-iOS-app-icon-small.png);
margin-left: auto;
margin-right: auto;

}

https://jsfiddle.net/js1rgh4b/1/

如果你给 padding.slots,它会起作用。如果您希望它们相似,则需要对 .OEAicon 执行相同的操作。如果没有,则在 .OEA.

中执行 vertical-align: top;

你可以设置 padding 为 .slots.OEA div ,这将使文本和图标下降。而不是 display: inline-block ,您可以使用 float:left 使 div 并排对齐。

DEMO

CSS:

.slots {
    float:left;
    width: 50%;
    height: 350px;
    background-color: #3484ce;
    padding:60px;
}
.OEA {
    float:left;
    padding:60px;
    width: 50%;
    height: 350px;
    background-color: green;
}

请试试这个,

.slots {
    display: inline-block;
    width: 50%;
    height: 350px;
    background-color: #3484ce;
    padding-top:60px;
}



.OEA {
    display: inline-block;
    width: 50%;
    height: 350px;
    background-color: green;
    padding-top:60px;
}