英文:
why parent child relationship is not maintained between <body> and <nav>
问题
<!-- 开始代码片段: js 隐藏: false 控制台: false Babel: false -->
<!-- 语言: lang-css -->
nav {
height: 10em;
}
.some_text {
top: 50%;
left: 40%;
position: relative;
}
<!-- 语言: lang-html -->
<nav>
<a class="some_text">ABC</a>
</nav>
<!-- 结束代码片段 -->
body css标签没有定义属性，因此nav（作为body的子元素）是否默认为不确定属性值，意味着浏览器无法使用，并且因此不会影响浏览器中<a>的位置吗？
参考：
-
https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
-
https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#percentages
<details>
<summary>英文:</summary>
<!-- begin snippet: js hide: false console: false babel: false -->
<!-- language: lang-css -->
nav {
height: 10em;
}
.some_text {
top: 50%;
left: 40%;
position: relative;
}
<!-- language: lang-html -->
<nav>
<a class="some_text">ABC</a>
</nav>
<!-- end snippet -->
`body` css tag has no property defined,so shouldn't `nav` (being the child element of `body` also default to undeterministic properties meaning values which browser cannot use), and as a consequence **not** effect `<a>` placement in the browser?
refer:
- [for reference][1]
- https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
- https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#percentages
[1]: https://stackoverflow.com/questions/76249090/mdn-confusing-concept-for-top-property
</details>
# 答案1
**得分**: 1
隐式的 `body` 标签具有默认的 CSS 样式，可能会在不同浏览器间发生变化。例如 `padding`。
```css
nav {
height: 10em;
background: blue;
}
.some_text {
top: 50%;
left: 40%;
position: relative;
background: red;
}
body {
padding: 0;
margin: 0;
border: 1px solid gray;
}
<nav>
<a class="some_text">ABC</a>
</nav>
英文:
The implicit body tag has default css which might change between browsers. For example the padding.
<!-- begin snippet: js hide: false console: false babel: false -->
<!-- language: lang-css -->
nav {
height: 10em;
background: blue;
}
.some_text {
top: 50%;
left: 40%;
position: relative;
background: red;
}
body {
padding: 0;
margin: 0;
border: 1px solid gray;
}
<!-- language: lang-html -->
<nav>
<a class="some_text">ABC</a>
</nav>
<!-- end snippet -->
答案2
得分: 1
以下是翻译好的部分：
问题
一些浏览器默认为<body> HTML标签添加了一些CSS（请参阅页面底部的“默认CSS设置”部分）。 实际上，许多其他HTML标签通常也具有一些默认设置的CSS（来源），总的来说，这取决于您使用的浏览器。 为了简单起见，假设您使用的浏览器默认为<body> HTML标签添加了一些CSS（例如，Chrome）。
解决方案1：自定义CSS
您可以添加以下CSS：
body {
margin: 0;
}
如果您不添加body { margin: 0; } CSS，<body>标签将默认具有margin: 8px;的CSS设置。
注意：您还可以在normalize.css中找到这行CSS代码（来源）。请参阅解决方案2。
解决方案2：normalize.css
您可以使用normalize.css来使浏览器更一致地呈现所有元素，并符合现代标准，如此处所述。
解决方案3：使用Bootstrap
您可以使用Bootstrap，默认情况下会从<body> HTML标签中删除margin。
注意
我想强调，在设置以下CSS时，人们经常犯一个常见错误：
body {
margin: 0;
padding: 0; /* 不必要！ */
}
无需为<body> HTML标签设置padding: 0;，因为它只有默认设置的margin: 8px; CSS，但没有padding！ 设置以下CSS就足够了：
body {
margin: 0;
}
英文:
Problem
Some browsers add some CSS to the <body> HTML tag by default (see the "Default CSS Settings" section at the bottom of the page). In fact, many other HTML tags also have some CSS set by default (source), generally speaking. All this depends on the browser you use. For the sake of simplicity, let's say you use a browser that does add some CSS to the <body> HTML tag by default (e.g., Chrome).
Solution 1: Custom CSS
You can add the following CSS:
body {
margin: 0;
}
If you don't add body { margin: 0; } CSS, the <body> tag will have margin: 8px; CSS set by default.
Note: You can also find this CSS line in normalize.css (source). See Solution 2.
Solution 2: normalize.css
You can use normalize.css to make browsers render all elements more consistently and in line with modern standards, as stated here.
<!-- begin snippet: js hide: true console: true babel: false -->
<!-- language: lang-css -->
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/
html {
line-height: 1.15; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers.
*/
body {
margin: 0;
}
/**
* Render the `main` element consistently in IE.
*/
main {
display: block;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/* Grouping content
========================================================================== */
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/* Text-level semantics
========================================================================== */
/**
* Remove the gray background on active links in IE 10.
*/
a {
background-color: transparent;
}
/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */
text-decoration: underline dotted; /* 2 */
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Remove the border on images inside links in IE 10.
*/
img {
border-style: none;
}
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* 2 */
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input { /* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select { /* 1 */
text-transform: none;
}
/**
* Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Correct the padding in Firefox.
*/
fieldset {
padding: 0.35em 0.75em 0.625em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box; /* 1 */
color: inherit; /* 2 */
display: table; /* 1 */
max-width: 100%; /* 1 */
padding: 0; /* 3 */
white-space: normal; /* 1 */
}
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
vertical-align: baseline;
}
/**
* Remove the default vertical scrollbar in IE 10+.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10.
* 2. Remove the padding in IE 10.
*/
[type="checkbox"],
[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
* Remove the inner padding in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/* Interactive
========================================================================== */
/*
* Add the correct display in Edge, IE 10+, and Firefox.
*/
details {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/* Misc
========================================================================== */
/**
* Add the correct display in IE 10+.
*/
template {
display: none;
}
/**
* Add the correct display in IE 10.
*/
[hidden] {
display: none;
}
<!-- end snippet -->
Solution 3: Using Bootstrap
You can use Bootstrap, which removes the margin from the <body> HTML tag by default.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</body>
</html>
<!-- end snippet -->
If you run the snippet above and use Developer Tools (i.e., press the F12 key), you can see that Bootstrap removes the margin in the _reboot.scss file by default. You don't need to do anything.
Note
I want to emphasize that there's a very common mistake people make when setting the following CSS:
body {
margin: 0;
padding: 0; /* Unnecessary! */
}
There's no need to set padding: 0; to the <body> HTML tag since it only has margin: 8px; CSS set by default, but not padding! Setting the following CSS is enough:
body {
margin: 0;
}
答案3
得分: 0
因为您给您的 nav 元素设置了 50em 的高度。尝试移除它。
英文:
It's because you have given a height of 50em to your nav element. Try removing that.
答案4
得分: -1
目前，至少可以预见到两个原因：
- <nav>块的高度太高（CSS → <code>height: 50em</code>）;
- 文本在块的水平中间位置（CSS → <code>top: 50%</code>）。
解决方案/提示：
- 尝试减小其中一个或两个值。
- 尝试在行<code>height: 50em;</code>下方的CSS代码中添加<code>border: 1px solid #0ff;</code>，以提高可读性。
英文:
At present, at least two reasons can be foreseeable:
- <nav> block height is too high (CSS → <code>height: 50em</code>);
- The text is positioned from the middle of the block horizontally (CSS → <code>top: 50%</code>).
Solutions/Hints:
- Try decreasing one of those values (or both).
- Try to add to the CSS code <code>border: 1px solid #0ff;</code> under the line <code>height: 50em;</code> for clarity.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论