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
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com