为什么不应用此 CSS 边距 0？答案

【问题标题】：Why isn't this CSS margin 0 applied?为什么不应用此 CSS 边距 0？
【发布时间】：2022-01-24 01:07:05
【问题描述】：

我将<body> 设置为margin: 0;，但它留下了8px 的空间。我怎样才能清除这个空白？

导航栏应该接触页面的侧面和顶部。 <img /> 和 <h1> 应该接触到导航栏的一侧：

CSS（Sass）：

// Imported fonts:
@font-face {
  src: url(fonts/MajorMonoDisplay-Regular.ttf);
  font-family: MojoMono;
}

//Color Variables:
$colors: (
  backGroundColor: #c1a5c6,
  purpleBorder: #511a59,
  greyFont: #373647,
  navButtonColor: #ea7985,
  redButtonBorder: #b53f4b,
);

//Body:
body,
html {
  height: 100%;
}
body {
  margin: 0;
  padding: 0;
}

h1 {
  font-family: MojoMono;
  font-size: 60px;
  color: map-get($color, greyFont);
}

img {
  border: solid 4px map-get($color, purpleBorder);
}

//Navbar:
.nav {
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  justify-content: space-around;
  align-items: center;
  background-color: gainsboro;
  padding: 5px;
  border: solid 10px $darkAccentColor;
}

.nav img {
  height: 100px;
  border: none;
}
.nav h1 {
  font-family: fantasy;
  font-size: 30px;
  color: map-get($color, greyFont);
  margin: 0px;
}
.nav button {
  flex-direction: row;
  background-color: map-get($color, navButtonColor);
  color: map-get($color, greyFont);
  border: solid 4px map-get($color, redButtonBorder);
  padding: 10px 20px;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

HTML：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <title>Hidden Expressions</title>

    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>

  <body>
    <div id="main"></div>

    <script defer src="bundle.js"></script>
  </body>
</html>

React 元素：

import React from 'react';
import { Link } from 'react-router-dom';
import Navbar from './NavBar';

export default class Main extends React.Component {
  render() {
    return (
      <div className="main">
        <Navbar />
        <div className="header">
          <h1>Our Story</h1>
          <img src="https://for.eharmony.com/dating-advice/wp-content/uploads/2013/09/dating-a-hairdresser.jpg" />
        </div>
      </div>
    );
  }
}

当我在浏览器中“检查”时，它并没有显示我将边距设置为 0。但是当我在浏览器中将它设置为 0 时，它看起来应该如此。

浏览器检查：

在浏览器中编辑后：

【问题讨论】：

标签： html css sass margin

【解决方案1】：

组合：

body,
html {
  height: 100%;
}
body {
  margin: 0;
  padding: 0;
}

进入：

body, html {
  margin: 0;
  padding: 0;
  height: 100%;
}

把它放在你的 CSS 文档的最顶部，就在第一行，字符集行的正下方：

@charset "UTF-8";
body, html {
....

另外，您不需要为<div class="main"> 设置类。您可以简单地使用<main></main> 并在您的CSS 文档上将其样式设置为main { background-color: none; }（请注意，在您的CSS 中main 样式之前没有.。它是HTML5 中的语义元素之一，因此被处理与body 相同。

【讨论】：

【解决方案2】：

基本 HTML 对每个元素都有自己的边距和内边距。如果您想将边距设为 0，则只需对一个元素（例如 body）进行 css 重置，或者您可以对所有元素进行 css 重置（更好）。我使用 eric mayers 的 css 重置。在这里。

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

你可以把它放在你的css文件中。或者创建另一个 css 文件。并在你的风格之前把他联系起来。这是带有重置的现成代码和您的代码

//css reset
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
// Imported fonts:
@font-face {
  src: url(fonts/MajorMonoDisplay-Regular.ttf);
  font-family: MojoMono;
}

//Color Variables:
$colors: (
  backGroundColor: #c1a5c6,
  purpleBorder: #511a59,
  greyFont: #373647,
  navButtonColor: #ea7985,
  redButtonBorder: #b53f4b,
);



//Body:

body,
html {
  height: 100%;
}
body {
  margin: 0;
  padding: 0;
}

h1 {
  font-family: MojoMono;
  font-size: 60px;
  color: map-get($color, greyFont);
}

img {
  border: solid 4px map-get($color, purpleBorder);
}

//Navbar:
.nav {
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  justify-content: space-around;
  align-items: center;
  background-color: gainsboro;
  padding: 5px;
  border: solid 10px $darkAccentColor;
}

.nav img {
  height: 100px;
  border: none;
}
.nav h1 {
  font-family: fantasy;
  font-size: 30px;
  color: map-get($color, greyFont);
  margin: 0px;
}
.nav button {
  flex-direction: row;
  background-color: map-get($color, navButtonColor);
  color: map-get($color, greyFont);
  border: solid 4px map-get($color, redButtonBorder);
  padding: 10px 20px;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

不推荐使用 !important。您将没有有效的代码。

【讨论】：

尝试将其粘贴在上面但仍然无法正常工作，有什么想法吗？谢谢！
尝试将重置 css 添加到您在消息中显示的 React 元素。您必须将 reset css 添加到主 html 文件，在其中连接页面的另一部分。

【解决方案3】：

你可以修改 margin 属性为 margin : 0 !important; 这是一个快速修复，我也可以详细解释。

【讨论】：

试过了，但似乎没有什么不同。思考为什么？谢谢！

【解决方案4】：

只需添加 !important 和你在正文中使用的 margin:0。喜欢--

body{
margin:0 !important;
}

【讨论】：