Question

我是网页设计的新手。我使用CSS和HTML和一些基本的JS创建了一个简单的Web应用程序。

-

问题： 即使我将页边距设置为0，页边距也不设置为0并留有8px的空间。如何清除空白？

问题的屏幕截图 ：（最明显的是导航栏和页面顶部之间。导航栏应接触页面的侧面和顶部。图像和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时，看起来应该看起来像

在浏览器中编辑之前：

在浏览器中编辑后：

请帮助！谢谢！

Answer 1

组合：

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

进入：

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

将其放在CSS文档的最上方，即第一行charset行的正下方：

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

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

Answer 2

基本HTML每个元素都有自己的边距和填充。如果要使margin为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。您将没有有效的代码。

Answer 3

您可以将margin属性修改为margin：0！important; 这是一个快速修复，我也可以详细解释。

Answer 4

只需添加！important与您在体内使用的margin：0即可。像-

body{
margin:0 !important;
}

CSS边距未设置为0

4 个答案: