gpt4 book ai didi

html - 元素之间难以理解的空间

转载 作者:行者123 更新时间:2023-11-28 16:54:02 24 4
gpt4 key购买 nike

无法理解为什么当所有填充、边距、边框均为 0 时,下面 html 代码中的部分和文章元素之间有空格。理想情况下,我认为两种颜色(浅绿色和浅蓝色)应该在中间相遇但是他们不是。仅供引用 browser=mozilla firefox

我还尝试检查浏览器调试工具中是否有填充、边框和边距的默认值,以及边距是否存在默认值。谁设置了这个默认值?

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
h1 { text-align: center; }
article { background: lightblue; }
section { background: lightgreen; }
</style>
</head>
<body>
<h1 >testing margin</h1>
<article>
<h2>this is article 1</h2>
<p>
The placement of elements on a Web page can be fairly complicated. One of the most basic features that influence where things go on a Web page is the CSS Box Model. The Box Model governs 3 important spacing features of CSS. We learned about margins previously as the space between elements. There are two other similar notions, padding and borders.
</p>
</article>
<section>
<p>
Perhaps the best way to understand is with a picture. All elements in an html document end up being treated as rectangles somewhere in the window. The content of each rectangle corresponds to the innermost rectangle in the image below. Just outside the content is the padding. This is kind of like an internal margin, meaning that it separates the contents from the border. The border essentially traces the sides of the padding rectangle.
</p>
</section>
</body>
</html>

test1.html
Affichage de test1.html en cours.

最佳答案

您提出问题的原因是浏览器开发人员为浏览器编写的 HTML 元素有默认样式。因此,如果您没有自己设置 HTML 元素的样式,则元素将获得默认的浏览器样式。

Default CSS Values for HTML Elements

关于html - 元素之间难以理解的空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57903385/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com