CODEWITHSUNDEEP
htmlcss
SimonMc
SimonMc

Reputation: 1

creating horizontal space in div between divs

I'm seeking a solution to an irksome problem, have looked through previous questions but can't find a working solution. I'm relatively new to web site development and I'm a little frustrated by such a simple issue. Hope you can help. TIA.

I have a social media div which will display the icons and contain the scripts, but at the moment each social media icon is directly next to or below another with no white space and it looks odd (http://www.keyadventures.co.uk - top of page). I'm trying to get them in a vertical pile with 10px white space between each icon.

The page code is:

<div id="socials">
    <div class="fb-like" data-href="https://www.facebook.com/keyadventures" data-width="200" data-layout="button" data-action="like" data-size="large" data-show-faces="false" data-share="true"></div>
<div><a href="https://twitter.com/KeyAdventures" class="twitter-follow-button" data-show-count="false">Follow @KeyAdventures</a></div>
    <div><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script></span></div>
    <div class="g-follow" data-annotation="none" data-height="20" data-href="//plus.google.com/u/0/102297967569531161845" data-rel="publisher">    </div>
    <div id="TA_socialButtonIcon437" class="TA_socialButtonIcon"><ul id="DgC9KwnBxX1r" class="TA_links HuiOsPByG"><li id="1UtO208Z0lf" class="aH1PNr1"><a target="_blank" href="https://www.tripadvisor.co.uk/Attraction_Review-g186326-d6132771-Reviews-Key_Adventures-Kendal_Lake_District_Cumbria_England.html"><img src="https://www.tripadvisor.co.uk/img/cdsi/img2/branding/socialWidget/20x28_green-21690-2.png"/></a></li></ul></div><script src="https://www.jscache.com/wejs?wtype=socialButtonIcon&amp;uniq=437&amp;locationId=6132771&amp;color=green&amp;size=rect&amp;lang=en_UK&amp;display_version=2"></script>
</div>

And the css code is:

 #socials {
float:left;
width:260px;
padding:5px 0;
font-size:13px;
height:85px;
}

#socials img{
padding:10;
margin:10;
}

Thanks for your help.

SimonMc

Upvotes: 0

Views: 26

Answers (1)

Super User
Super User

Reputation: 9642

you have some syntax issues in your CSS, it should like below CSS

#socials img{
  padding:10px;
  margin:10px;
}

Upvotes: 1

Related Questions