gpt4 book ai didi

html - 填充不适用于 div 图标

转载 作者:太空宇宙 更新时间:2023-11-04 10:42:21 26 4
gpt4 key购买 nike

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

这些都在“工作”部分下。

现在填充不会影响图标,而边距会移动整个 .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/

最佳答案

请试试这个,

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

关于html - 填充不适用于 div 图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35691553/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com