填充不适用于 div 图标答案

【问题标题】：Padding not working for divs icons填充不适用于 div 图标
【发布时间】：2016-04-15 07:34:24
【问题描述】：

我正在尝试向我的 .slotIcon 类添加填充。我的 .slots 类是容器，女巫与另一个 div 是内联块，试图让两个 div 并排（50% 宽度）。

这都在“工作”部分下。

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

我要做的就是稍微降低 .slots div 中的图标和文本。

 <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/

【问题讨论】：

标签： html css margin inline padding

【解决方案1】：

请试试这个，

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

【讨论】：

【解决方案2】：

您可以将填充设置为.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;
}

【讨论】：

【解决方案3】：

如果你给.slots 一个padding，它就可以工作。如果您希望它们相似，您需要对.OEAicon 执行相同的操作。如果没有，则在.OEA 中执行vertical-align: top;。

【讨论】：