社交媒体图标之间的间距

Question

I have a design as shown below which I am trying to replicate in my domain

The above design which I have referenced is not a full-design. We have to scroll down towards the bottom to see that section in the domain . I am able to accomplish 80% in that design. The rest 20% which I am not able to complete is the spacing between social media icons which I am trying to replicate in my domain.

In the domain, there is no spacing between social media icons. I am wondering how I can increase the spacing between every social media icons so that it looks similar to the above design.

Note: I have marked arrow in the above design in order for the viewers to get the exact idea what I want to accomplish. Those arrows will not come in the design and its signifies spacing between social media icons.

I tried playing with the CSS code in the inspect section but I was unable to replicate the above design.

The HTML and JS code which I have used to get the social media icons on my webpage is:

    <div style="display:inline-block;vertical-align:top">
        <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://www.awardwinnersonly.com" data-text="Czech out the books, movies, and music that won major awards" data-via="BClayShannon">Tweet</a>
        <script>
            ! function(d, s, id) {
                var js, fjs = d.getElementsByTagName(s)[0],
                    p = /^http:/.test(d.location) ? 'http' : 'https';
                if (!d.getElementById(id)) {
                    js = d.createElement(s);
                    js.id = id;
                    js.src = p + '://platform.twitter.com/widgets.js';
                    fjs.parentNode.insertBefore(js, fjs);
                }
            }(document, 'script', 'twitter-wjs');

        </script>
    </div>
    <div style="display:inline-block;vertical-align:top" class="fb-like" data-href="http://www.awardwinnersonly.com" data-send="false" data-width="450" data-show-faces="false" data-font="segoe ui">
    </div>
    <iframe src="https://www.facebook.com/plugins/share_button.php?href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&layout=button&size=small&mobile_iframe=true&width=59&height=20&appId" width="59" height="20" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>

    <script src="https://apis.google.com/js/platform.js" async defer></script>
    <g:plus action="share" href="https://www.example.com"></g:plus>


    <script src="//platform.linkedin.com/in.js" type="text/javascript">
        lang: en_US

    </script>
    <script type="IN/Share"></script>

Answer 1

You could add margin to each social-media button like:

    margin-right: 1em;

For example the first twitter button like:

display:inline-block;vertical-align:top;margin-right: 3em;padding-left: 15%;

You better do it with some class so you don't repeat same "inline" style all over.

As a side note I would also suggest to wrap the whole "middle" content in one <div class="main-content"> (just example) positioning the whole content. Instead of setting padding-left: 15%; to every content element.