个人中心
gpt4 book ai didi

html - 为什么不应用此 CSS 边距 0？

转载 作者：太空宇宙 更新时间：2023-11-03 19:26:06 24 4
gpt4 key购买 nike

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

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

enter image description here

CSS(萨斯):

// 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 时，它看起来应该如此。

浏览器检查:

enter image description here

在浏览器中编辑后:

enter image description here

最佳答案

合并:

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 相同。

关于html - 为什么不应用此 CSS 边距 0？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53915966/

24 4 0
文章推荐： Matlab:将char单元格转换为 double 向量单元格
文章推荐： python - zope 模板命名空间消失了？
文章推荐： matlab - MATLAB 是否优化 diag(A*B)？
文章推荐： python - 处理 python 中的错误
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com