간격은

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.

참고 : 내가 달성하고 싶은 정확한 아이디어를 얻을 시청자 위해서는 위의 디자인에 화살표를 표시했다. 그 화살은 디자인에서 오는 가 아니며 그것은 소셜 미디어 사이의 간격을 의미합니다 아이콘.

inspect 섹션에서 CSS 코드를 사용해 보았지만 위의 디자인을 복제 할 수 없었습니다.

html로 나는 내 웹 페이지에 소셜 미디어 아이콘을 가져 오는 데 사용했다 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

당신은 같은 각 소셜 미디어 버튼에 마진을 추가 할 수 있습니다 당신은 더 나은 어떤 class 그래서 Y와 함께 할

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

: 예를 들어 첫 번째 트위터 버튼과 같이 모든 "같은"인라인 스타일을 반복하지 마십시오.

참고로 전체 내용을 배치하는 하나의 (예)의 전체 "중간"콘텐츠를 래핑하는 것이 좋습니다. 모든 콘텐츠 요소에 padding-left: 15%;을 설정하는 대신