Премахнете празното пространство над div в приложението за реакция

Имам проблем, при който създадох заглавен компонент, но все още има празно пространство над заглавката на всяка страница, в която изтеглям заглавния компонент

това е целият ми компонент на заглавката:

import React from 'react';
import { Link } from 'react-router';
import './index.scss';

export default class Header extends React.Component {

  render() {
    return(
      <div className="container">
        <ul>
          <div className="links">
              <li><Link to="quizzes">Quizzes</Link></li>
            </div>
            <div className="links">
              <li><Link to="categories">Categories</Link></li>
            </div>
            <div className="links">
              <li><Link to="create">Create</Link></li>
          </div>
        </ul>
      </div>
    )
  }
}

и това е целият ми css

body {
  margin: 0;
}
.container {
  margin: 0;
  background-color: #bec0c4;
  height: 50px;
  width: 100%;
}
.container ul{
  display: flex;
  flex-direction: row;
  font-size: 20px;
  justify-content: space-between;
  list-style-type: none;
  width: 90%;
}

Виждал съм много отговори, които казват да се зададе полето на 0, но това все още ми дава празно пространство в горната част. ако задам margin-top на -20px, той го премахва, но не ми харесва това решение


reactjs html css header whitespace
person The worm    schedule 18.06.2017    source източник
comment
Моля, добавете html и стил за заглавката и нейното съдържание.   -  person Ori Drori    schedule 18.06.2017
comment
@OriDrori, съжалявам, че съм объркан, това вече е там?   -  person The worm    schedule 18.06.2017
comment
Моя грешка. Пропуснато е името на компонента. Стиловете нямат заглавката на името :) И така или иначе не е това, което си мислех.   -  person Ori Drori    schedule 18.06.2017
comment
Можете ли да добавите CSS за класа .links?   -  person Ori Drori    schedule 18.06.2017
comment
няма css за връзките. целият css е поставен над него, който е css в контейнера на класа   -  person The worm    schedule 18.06.2017

Отговори (6)


arrow_upward
12
arrow_downward

Повечето браузъри (напр. Chrome) идват с набор от правила по подразбиране (стилов лист на потребителски агент) и задават правила като margin в ul, така че вероятно имате margin-top (-webkit-margin-before: 1em;), зададено за вашия ul.

Задайте margin-top: 0 на ul ще премахне интервала:

ul {
  margin-top: 0;
}
person glennreyes    schedule 18.06.2017
comment
ах, така че моето тяло { margin: 0} не отменяше правилото за ul, интересно - person The worm; 18.06.2017
comment
Обърнете внимание, маржовете във вътрешните контейнери се припокриват по подразбиране. Ако имате множество сродни елементи с поле, интервалите ще се припокриват вертикално. - person glennreyes; 18.06.2017

arrow_upward
1
arrow_downward

Зададох margin за ul на нула (и включих подложка за принудително нулиране по подразбиране). Кажете ми дали това отговаря на вашите изисквания.

Може да искате да разгледате инструменти като normalize.css за бъдеща употреба.

body {background-color: red;}
body, ul {
  margin: 0;
  padding: 0;
}

.container {
  background-color: #bec0c4;
  height: 50px;
  width: 100%;
}

.container ul {
  display: flex;
  flex-direction: row;
  font-size: 20px;
  justify-content: space-between;
  align-items: center;
  list-style-type: none;
  width: 90%;
  height: 100%;
}
<div class="container">
  <ul>
    <div class="links">
      <li>
        <a>Quizzes</a>
      </li>
    </div>
    <div class="links">
      <li>
        <a>Categories</a>
      </li>
    </div>
    <div class="links">
      <li>
        <a>Create</a>
      </li>
    </div>
  </ul>
</div>

person Gerard    schedule 18.06.2017

arrow_upward
1
arrow_downward

Добавих margin: 0 към .container ul към и не оставя празно пространство. Оставяше празно пространство преди над компонента Header. Ето снимка как изглежда сега.

въведете описание на изображението тук

person Mateusz Mysiak    schedule 18.06.2017

arrow_upward
1
arrow_downward

Първо проверете страницата, като използвате инспектиращия елемент (Ctrl+shift+I = за google chrome в windows).

След това проверете дали <ul> заема празното пространство, след което задайте ul { margin:0; } или за всеки друг елемент, който заема пространството. Надявам се да помогне!

person Amaan Ahmad    schedule 28.07.2019

arrow_upward
0
arrow_downward

Ако приложите reset.css към кода си, уверете се, че страницата ви зарежда това reset.css. Ако го зареждате от началната страница, например -index.js-, и след това отворите браузъра си директно на, да кажем, страницата about_us -about_us.js-, тогава ако about.us.js не успее да зареди reset.css, ще имате стандартна страница с всички стилове по подразбиране.

Така че винаги се уверявайте, че зареждате своя reset.css на всичките си маршрути, за да избегнете препълване на страницата на браузърите по подразбиране.

person Webwoman    schedule 19.02.2020

arrow_upward
0
arrow_downward

В моя случай следният кодов фрагмент работи (Спомена това в app_directory/src/index.css)

* {
  margin-top: 0;
}
person Bahu    schedule 10.01.2021