CSS Margin не устанавливается в 0 - PullRequest
Новая
       58

CSS Margin не устанавливается в 0

0 голосов
/ 24 декабря 2018

Я новичок в веб-дизайне.Я создал простое веб-приложение с использованием CSS и HTML и некоторого базового JS.

-

Проблема: Несмотря на то, что я устанавливаю поле на 0, поле не устанавливается на 0 и оставляет 8px пространства.Как я могу очистить этот пробел?

Снимок экрана: (наиболее заметно между панелью навигации и верхней частью страницы. Панель навигации должна касаться стороны и верхней частистр. Изображение и тег h1 должны касаться стороны) enter image description here

-

Вот мой код 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 в браузере, это выглядит так, как будто должно выглядеть.

Перед редактированием в браузере:

enter image description here

После редактирования в браузере:

enter image description here

Пожалуйста, помогите!Thx!

Ответы [ 4 ]

0 голосов
/ 25 декабря 2018

Объединение: 

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; } (обратите внимание, что перед стилем main в вашем CSS нет .. Это один из семантических элементов в HTML5, поэтому он рассматриваетсятак же body есть.

0 голосов
/ 24 декабря 2018

Просто добавьте! Важный с полем: 0, которое вы использовали внутри тела.Нравится - 

body{
margin:0 !important;
}
0 голосов
/ 24 декабря 2018

Базовый HTML имеет свои поля и отступы для каждого элемента.Если вы хотите сделать поле 0, вам нужно сделать сброс CSS только для одного элемента, например body, или вы можете сделать сброс 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;
}

Вы можете поместить его в начало вашего файла 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;
}

Использование! Важный не рекомендуется.У вас будет неверный код.

0 голосов
/ 24 декабря 2018

Вы можете изменить свойство margin для margin: 0! Важный;Это быстрое решение, я тоже могу объяснить подробно.

...