CODEWITHSUNDEEP
csstwitter
Jon Kantner
Jon Kantner

Reputation: 603

How Do I Remove Space From a Tweet Button?

I know how to integrate Tweet buttons into WordPress blog posts, but I am having difficulty removing the space it leaves underneath it (shown in red).

enter image description here

I have tried adding margin: 0; and padding: 0; to the twitter-share-button class so that it is vertically in line with the post information, but nothing happens. How can I fix that?

body {
    font-family: Arial, sans-serif;
}
.twitter-share-button {
    margin: 0;
    padding: 0;
}
<p>By admin | Published January 1, 20XX <a href="https://twitter.com/share" class="twitter-share-button" data-via="j_kantner">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></p>

Upvotes: 0

Views: 375

Answers (5)

zer00ne
zer00ne

Reputation: 44043

Try adjusting the <p> paragraph that the button is inside of.

Sorry I reread your question. Use negative margins and or padding.

.twitter-share-button {
  margin: -10px;
  padding: 8px;
}
<p>By admin | Published January 1, 20XX <a href="https://twitter.com/share" class="twitter-share-button" data-via="j_kantner">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>
</p>

Upvotes: 0

user4979686
user4979686

Reputation:

In addtion to the other answers, you can use a negative value on the margin.

.twitter-share-button {
    margin-bottom: -1px;
}

Upvotes: 0

Soubhik Mondal
Soubhik Mondal

Reputation: 2666

The script is adding an iframe to your page. The only way I could solve this problem is to add a vertical-align : bottom; to the iframe.

Here is JSFiddle link.

Upvotes: 3

TheLovelySausage
TheLovelySausage

Reputation: 4114

You could try to use alignment instead

body {
    font-family: Arial, sans-serif;
    vertical-align: text-bottom;
}
.twitter-share-button {
    margin: 0;
    padding: 0;
    vertical-align: text-bottom;
}

Upvotes: 1

j08691
j08691

Reputation: 207953

You could add the CSS rule:

iframe {
  vertical-align: bottom;
}


body {
  font-family: Arial, sans-serif;
}
.twitter-share-button {
  margin: 0;
  padding: 0;
}
iframe {
  vertical-align: bottom;
}
<p>By admin | Published January 1, 20XX <a href="https://twitter.com/share" class="twitter-share-button" data-via="j_kantner">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>
</p>

Upvotes: 1

Related Questions