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

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

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.

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

Comments

Popular posts from this blog

c# - How Configure Devart dotConnect for SQLite Code First? -

c++ - Clear the memory after returning a vector in a function -

erlang - Saving a digraph to mnesia is hindered because of its side-effects -