html - 自定义 HTML 正文的大小

Question

我想自定义 Wordpress 主题“态度”的主体，以消除页眉（空白）和页面顶部之间的灰色间隙。换句话说，我想准确地删除这个灰色间隙，以及靠近页脚的正文末端和站点末端之间的灰色间隙。

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

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

此致

Answer 1

标头与顶部稍有间隔的原因是，带有 id 'branding' 的标头标签具有值为 30px 的 CSS 属性 margin-top。这会导致标题标签设置为距屏幕顶部 30 像素。只需删除那行 CSS 代码即可将正文移动到页面顶部。

Answer 2

从使用 chrome 开发工具的快速浏览来看，标题元素似乎是罪魁祸首。看来他们正在使用id 选择器30px为其应用上边距。branding

#branding {
   margin-top: 30px;
}

您可以在 style.css 的第 549 行更改它。

现在讲课...

不是真的，但我想向您展示一些东西，以帮助您在未来解决这些类型的问题 - 了解更多关于您可用的工具的信息永远不会。

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

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

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

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

快速滚动右侧的样式检查器会显示用于品牌化的 id 选择器和将上边距设置为 30px 的声明。检查器也很友好地告诉我们规则来自源代码的哪里；style.css, line:549.

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

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

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