html - Padding not working for divs icons -
i trying add padding .sloticon class. .slots class container, witch inline-block div, trying make both divs side side (50% width).
this under "work" section.
now padding doesn't affect icons, , margins move entire .slots div.
all want lower icon , text, in .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; }
you can set padding .slots
, .oea div
,this make text , icon come down. , instead of display: inline-block
, can use float:left
make div's align side side.
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; }
Comments
Post a Comment