如何从推文按钮中删除空间？答案

【问题标题】：How Do I Remove Space From a Tweet Button?如何从推文按钮中删除空间？
【发布时间】：2015-12-12 04:32:06
【问题描述】：

我知道如何将 Tweet 按钮集成到 WordPress 博客文章中，但我很难删除它留下的空间（显示为红色）。

我尝试将margin: 0; 和padding: 0; 添加到twitter-share-button 类，使其与帖子信息垂直对齐，但没有任何反应。我该如何解决？

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>

【问题讨论】：

请分享您的网址？有时 line-height 在这种情况下也有帮助。
我使用的是 localhost 测试博客。
很高兴 Blaze 已经为您提供了解决方案！祝你好运:)

标签： css twitter

【解决方案1】：

脚本正在将iframe 添加到您的页面。我可以解决此问题的唯一方法是将vertical-align : bottom; 添加到iframe。

这里是 JSFiddle link。

【讨论】：

将vertical-align : bottom; 用于.twitter-share-button 也有效，但感谢您提供的信息！
我重新检查了代码，有趣的是.twitter-share-button这个类，和ID一样，属于iframe，就像ID一样，#twitter-widget-0。我没有注意到！

【解决方案2】：

您可以添加 CSS 规则：

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>

【讨论】：

【解决方案3】：

您可以尝试使用对齐方式

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

【讨论】：

【解决方案4】：

除了其他答案，您可以在边距上使用负值。

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

【讨论】：

【解决方案5】：

~~尝试调整按钮所在的<p> 段落。~~

抱歉，我重读了您的问题。使用负边距和/或填充。

.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>

【讨论】：