の間隔は

Question

私はデザインを持っています。 domainのセクションを見るには、下にスクロールする必要があります。私はそのデザインで80％を達成することができます。私が完了できない残りの20％は、自分のドメインで複製しようとしているソーシャルメディアアイコンの間隔です。

ドメインでは、ソーシャルメディアアイコンの間にスペースはありません。 I am wondering how I can increase the spacing between every social media icons so that it looks similar to the above design.

注：私は私が達成したいものを正確なアイデアを得るために、視聴者 ためには上記の設計の矢印をマークしています。それらの矢印は デザインに入っておらず、それはソーシャルメディアの間隔を意味します アイコン。

私は検査セクションでCSSコードを試してみましたが、私は上記のデザインを複製できませんでした。

HTMLと私は私のWebページ上のソーシャルメディアのアイコンを取得するために使用されてきたJSコードは次のとおりです。

margin-right: 1em; 

：

<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

あなたは次のようにそれぞれのソーシャルメディアボタンにマージンを追加することができますたとえば、最初のtwitterボタンは次のようになります：

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

classの方がいいです同じインラインスタイルを全部繰り返してはいけません。

私はまた、全体のコンテンツを配置する1つの<div class="main-content">（例）の中に全体の "中間"コンテンツをラップすることを提案します。すべてのコンテンツ要素にpadding-left: 15%;を設定する代わりに。