gpt4 book ai didi

html - 获取背景颜色以填充整个元素

转载 作者:行者123 更新时间:2023-11-28 04:32:55 28 4
gpt4 key购买 nike

我不太明白这段代码为什么会这样。如果我这样做...

HTML:

<body>
<header>
<h1>
MY HEADER
</h1>
</header>

<article>
<p>Lorem ipsum dolor sit amet...</p>
</article>

<footer>
<p>This is my footer</p>
</footer>
</body>

CSS:

body {
width: 60%;
margin: 0 auto;
}

article {
background: #AAA;
}

footer {
background: #888;
}


header {
color: #333;
background: #0F0;
}

我的结局是这样的: enter image description here

但是如果我给元素添加边框。

CSS:

body {
width: 60%;
margin: 20px auto;
}

article {
border: 1px solid red;
background: #AAA;
}

footer {
border: 1px solid red;
background: #888;
}


header {
border: 1px solid red;
color: #333;
background: #0F0;
}

我的结局是这样的: enter image description here

这是为什么?

如何在不添加边框的情况下获得第二个结果?


编辑我终于进行了简单的归一化。

  • { margin :0;

我首先想摆脱它,因为我正在构建的页面是为了向一群初学者展示如何制作一个简单的 html/css 页面。而且我认为对于非编码人员来说,如果不陷入这些奇怪的行为,就很难掌握。

最佳答案

默认情况下,大多数 HTML 元素都应用了一些边距。

您可以使用以下行从 CSS 中的所有元素中删除这些元素,最好放在最顶部。

*{margin:0;}

请注意,这将适用于您稍后添加的任何段落(或任何其他内容),最好针对单个元素。

您还可以为每个元素添加高度或内边距,为它们留出一点空间,就像这样;

<style type="text/css">
*{
margin:0;
}
body {
width: 60%;
margin: 0 auto;
}

article {
padding: 3px;
background: #AAA;
}

footer {
padding: 3px;
background: #888;
}


header {
padding: 3px;
color: #333;
background: #0F0;
}

祝你好运!

关于html - 获取背景颜色以填充整个元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28203727/

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