自定义HTML正文的大小

Question

我想自定义Wordpress主题的主体“态度”，以消除标题（空白区域）和页面顶部之间的灰色差距。换句话说，我想要删除这个灰色间隙以及页脚附近的身体末端和站点末端之间的灰色间隙。

以下是态度的现场演示：http://themehorse.com/preview/attitude/

非常感谢您提前，如果有任何问题，请随时与我联系。

祝你好运

Answer 1

标题与顶部间隔一点点的原因是因为标题标记带有id＆＃39; branding＆＃39; CSS属性margin-top的值为30px。这会导致标题标记从屏幕顶部设置为30px。只需删除该行CSS代码即可将正文移动到页面顶部。

Answer 2

使用chrome dev工具快速查看，标题元素似乎是罪魁祸首。他们似乎正在使用30px id选择器向其应用branding上边距。

#branding {
   margin-top: 30px;
}

您可以在style.css的第549行更改此内容。

现在进行演讲......

不是真的，但我想向您展示一些事情，以帮助您在将来解决这些类型的问题 - 它永远不会知道更多有关您可用的工具。

1. 您可以通过右键单击页面上的任意位置并选择Inspect元素来打开chrome dev工具，或使用操作系统的键盘快捷键



1. 在弹出的chrome dev工具面板的左上角，有一个方框符号中的鼠标指针。如果单击它以启用它，然后在页面上移动鼠标，您将看到以各种颜色突出显示的元素。



在这里，我们可以看到顶部的灰色条形图以橙色突出显示，下方的大部分以蓝色突出显示。

如上所示突出显示元素时单击鼠标左键将跳转到检查工具的“元素”选项卡中的元素。我们可以看到我们选择的元素是标题，ID为branding



快速滚动右侧的样式检查器会显示一个用于标记的ID选择器和一个用于将上边距设置为30px的声明。检查员也很友好地告诉我们源代码在规则中的来源; style.css, line:549。

如果我们切换到Source选项卡并在检查器中打开style.css（或在文本编辑器中打开源代码），那么我们会在承诺的第549行找到品牌ID选择器。



有关如何浏览网页的更多信息，我建议您阅读Google Chrome或Mozilla的开发工具指南（您最喜欢使用的浏览器）

Firefox：https://developer.mozilla.org/en-US/docs/Tools
谷歌浏览器：https://developer.chrome.com/devtools