Html 元素间的不可理解空间_Html_Css

Html 元素间的不可理解空间

html css

Html 元素间的不可理解空间,html,css,Html,Css,无法理解为什么当所有填充、边距和边框都为0时，下面的html代码中的section和article元素之间存在空格。理想的情况下，我认为两种颜色都是浅绿色和浅蓝色的，但它们不是。仅供参考浏览器=mozilla firefox 我还尝试在浏览器调试工具中检查是否存在填充、边框和边距的默认值，以及是否存在边距的默认值。谁设置了这个默认值代码如下： <!DOCTYPE html> <html lang="en"> <head> <me

无法理解为什么当所有填充、边距和边框都为0时，下面的html代码中的section和article元素之间存在空格。理想的情况下，我认为两种颜色都是浅绿色和浅蓝色的，但它们不是。仅供参考浏览器=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.

p标签使用用户代理样式表，所以在css下面添加p标签会给你想要的输出。检查代码段

p{padding:0; margin:0;}

p{ 填充：0；保证金：0； } h1{ 文本对齐：居中； } 文章{ 背景：浅蓝色； } 部分{ 背景：浅绿色； } 测试裕度这是第一条网页上元素的放置可能相当复杂。CSS框模型是影响网页内容的最基本特性之一。长方体模型控制CSS的3个重要间距特性。我们以前了解过利润率作为元素之间的空间。还有两个类似的概念，填充和边框。

也许最好的理解方式是用图片。html文档中的所有元素最终都被视为窗口中某个地方的矩形。每个矩形的内容对应于下图中最里面的矩形。就在外面内容是填充物。这有点像内部边距，意味着它将内容与边框分隔开。边框基本上跟踪填充矩形的边。

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

您可以使用重置用户代理样式表。每个浏览器都有一个默认的CSS，用户必须重置它。css是一个小的css文件，它在HTML元素的默认样式中提供了更好的跨浏览器一致性