如何减少小部件之间以及Wordpress中博客文章之间的空间？

Question

我正在尝试减少侧边栏小部件上方和下方的空间，并减少Wordpress网站上博客文章之间的空间，但我不知道如何做到。我在互联网上进行了搜索，并尝试将对其他人有用的代码输入到主题的样式表和“其他CSS”区域，但无济于事。

这里是页面的链接，因此您可以看到我在说什么：https://www.swissarmymusician.com/articles/

如果有任何含义，我使用的是“ Astra”主题（免费版本）。 如果有人可以帮助，将不胜感激！

Answer 1

您可以将以下内容添加到您的style.css

.widget {
padding: 1em .65em; //1st value top/bottom 2nd value left/right; Default was 2em;
margin: 1em .65em; //1st value top/bottom 2nd value left/right; Default was 2em;
}

致谢。

详细了解CSS 单位 @ https://www.w3schools.com/cssref/css_units.asp； 了解有关CSS 填充 @ https://www.w3schools.com/css/css_padding.asp的更多信息； 详细了解CSS 边距 @ https://www.w3schools.com/css/css_margin.asp;

编辑1：如果要编辑小部件标题，可以使用以下方式定位它：

.widget-title {
margin-bottom: .65em; //Default was 1em;
}

如果您需要更多帮助，请不要犹豫。

编辑2 关于最新评论

.widget {
padding: 1em .65em !important; //1st value top/bottom 2nd value left/right; Default was 2em;
margin: 1em .65em !important; //1st value top/bottom 2nd value left/right; Default was 2em;
}

Answer 2

强烈建议您在网站制作者的早期学习，以便在您喜欢的浏览器（已随浏览器安装）中使用devtools。如果您检查侧边栏，您将看到此内容，然后可以轻松地检测出要进行更改而必须修改的CSS类：

在这里，我将修改被检查的小部件div底部的橙色或黄色部分，以便在底部（padding-bottom :）或页边距（橙色）处获得更多的填充（检查器颜色为黄色）检查器颜色）（边距底部：）。

如果您的样式不起作用，则可能需要在每行无效的行中添加一个!important标志，以使您的更改覆盖主题自己的CSS样式。该网站祝您好运。