CODEWITHSUNDEEP
htmlcssmargininlinepadding
Matt
Matt

Reputation: 147

Padding not working for divs icons

I am trying to add padding to my .slotIcon class. My .slots class is the container, witch is inline-block with another div, trying to make both divs side by side (50% width).

This is all under the "work" section.

Now padding doesn't affect the icons, and margins move the entire .slots div.

All I want to do is slightly lower the icon and text, in the .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/

Upvotes: 0

Views: 2084

Answers (3)

Jordan Carter
Jordan Carter

Reputation: 1336

If you give a padding to .slots, it works. You would need to do the same for .OEAicon if you want them to be similar. If not, then do vertical-align: top; in .OEA.

Upvotes: 0

GS Bala
GS Bala

Reputation: 400

Please Try This,

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

Upvotes: 1

Pbk1303
Pbk1303

Reputation: 3802

You can set padding to .slots and .OEA div ,this will make the text and the icon come down. And instead of display: inline-block , you can use float:left to make the div's align side by side.

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

Upvotes: 0

Related Questions