html 中的间距不规则
Spacing irregularities in html
我正在尝试格式化 html 中的文本,但随机间距不会消失。我尝试修复填充和边距,但这没有任何帮助。
我是网络开发的新手,所以非常感谢您的帮助和指导!
这是我的代码:
<center> <h2> Hello! </h3> </center>
<h4 style="left: 10px; padding-left: 10px; margin: 0px"> Some thing goes here </h5>
<h6 style = "right: 90px; padding-left: 10px; padding-bottom: 0px; margin: 0px"> test </h6>
<h6 style = "padding-left: 20px; padding-top: 0px; padding-right: 20px; font-style: regular;"> description </h6>
我强烈建议使用 Chrome 的检查功能(称为 DevTools),它会打开一个新的 window,提供客户端编码,使开发变得更加容易!
简而言之,使用 DevTools,您可以:
- 实时修改网站的外观和与用户的互动方式(
Elements
选项卡)。这仅是客户端(HTML、CSS、JS 等)。 CSS 默认在右侧。您可以修改 CSS 等代码以满足您的需要,然后将其保存到您的开发文件中。
- 检查JavaScript输出。这非常适合通过使用
console.log()
或检查 JSON 之类的输出来调试您的 JS,这些输出将在可理解的可折叠视图(Console
选项卡)中进行分解。
- 定位 internal/external 引用,例如图片、.js、.css 等,您可以实时 modify/debug。值得注意的是:当查看数据被缩小的 .js 文件时,单击左下角的
{}
将 pretty-print
它并使其更清晰。
- 还有其他功能,但目前这些功能最适合您。
这将对齐分栏文本。唯一的变化是 padding-left: 20px;
到 padding-left: 10px;
。
<center> <h2> Hello! </h3> </center>
<h4 style="left: 10px; padding-left: 10px; margin: 0px"> Some thing goes here </h5>
<h6 style = "right: 90px; padding-left: 10px; padding-bottom: 0px; margin: 0px"> test </h6>
<h6 style = "padding-left: 10px; padding-top: 0px; padding-right: 20px; font-style: regular;"> description </h6>
或者,如果您想要删除 description
之前/之后的 space,您需要像这样添加 margin: 0px;
:
<center> <h2> Hello! </h3> </center>
<h4 style="left: 10px; padding-left: 10px; margin: 0px"> Some thing goes here </h5>
<h6 style = "right: 90px; padding-left: 10px; padding-bottom: 0px; margin: 0px"> test </h6>
<h6 style = "margin: 0px; padding-left: 10px; padding-top: 0px; padding-right: 20px; font-style: regular;"> description </h6>
我正在尝试格式化 html 中的文本,但随机间距不会消失。我尝试修复填充和边距,但这没有任何帮助。
我是网络开发的新手,所以非常感谢您的帮助和指导!
这是我的代码:
<center> <h2> Hello! </h3> </center>
<h4 style="left: 10px; padding-left: 10px; margin: 0px"> Some thing goes here </h5>
<h6 style = "right: 90px; padding-left: 10px; padding-bottom: 0px; margin: 0px"> test </h6>
<h6 style = "padding-left: 20px; padding-top: 0px; padding-right: 20px; font-style: regular;"> description </h6>
我强烈建议使用 Chrome 的检查功能(称为 DevTools),它会打开一个新的 window,提供客户端编码,使开发变得更加容易!
简而言之,使用 DevTools,您可以:
- 实时修改网站的外观和与用户的互动方式(
Elements
选项卡)。这仅是客户端(HTML、CSS、JS 等)。 CSS 默认在右侧。您可以修改 CSS 等代码以满足您的需要,然后将其保存到您的开发文件中。 - 检查JavaScript输出。这非常适合通过使用
console.log()
或检查 JSON 之类的输出来调试您的 JS,这些输出将在可理解的可折叠视图(Console
选项卡)中进行分解。 - 定位 internal/external 引用,例如图片、.js、.css 等,您可以实时 modify/debug。值得注意的是:当查看数据被缩小的 .js 文件时,单击左下角的
{}
将pretty-print
它并使其更清晰。 - 还有其他功能,但目前这些功能最适合您。
这将对齐分栏文本。唯一的变化是 padding-left: 20px;
到 padding-left: 10px;
。
<center> <h2> Hello! </h3> </center>
<h4 style="left: 10px; padding-left: 10px; margin: 0px"> Some thing goes here </h5>
<h6 style = "right: 90px; padding-left: 10px; padding-bottom: 0px; margin: 0px"> test </h6>
<h6 style = "padding-left: 10px; padding-top: 0px; padding-right: 20px; font-style: regular;"> description </h6>
或者,如果您想要删除 description
之前/之后的 space,您需要像这样添加 margin: 0px;
:
<center> <h2> Hello! </h3> </center>
<h4 style="left: 10px; padding-left: 10px; margin: 0px"> Some thing goes here </h5>
<h6 style = "right: 90px; padding-left: 10px; padding-bottom: 0px; margin: 0px"> test </h6>
<h6 style = "margin: 0px; padding-left: 10px; padding-top: 0px; padding-right: 20px; font-style: regular;"> description </h6>