刪除空白的反應程序

我有，我已經創建了一個頭組件中的問題，但仍然有空白每一頁我拉頭組件在刪除空白的反應程序

的頭球攻門高出，這是我整個頭組件：

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，但是這仍然讓我在空白的T運。如果我將margin-top設置爲-20px，它會將其刪除，但我不喜歡此解決方案

來源

2017-06-18 The worm

請爲標題添加html和樣式，以及它的內容。 –

@OriDrori對不起，我很困惑，那已經在那兒了？ –

我的不好。錯過了組件的名稱。樣式沒有名稱標頭:)而且這不是我所想的。 –

大多數瀏覽器（如鉻）附帶的規則默認設置（用戶代理樣式表），並設置規則像margin在ul的，所以你可能有一個margin-top（-webkit-margin-before: 1em; ）設置爲您的ul。

設置margin-top: 0在ul將刪除空間：

ul { 
    margin-top: 0; 
}

來源

2017-06-18 11:10:13 glennreyes

ah right，所以我的body {margin：0}並不是重寫ul的規則，有趣的 –

注意，默認情況下，內部容器中的邊距是重疊的。如果您有多個具有邊距的同胞元素，則這些空間將垂直重疊。 – glennreyes

我已將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>

來源

2017-06-18 11:10:09 Gerard

我添加了一個margin: 0到.container ul並不會留下任何空白。它在Header組件之前留下空格。下面是它現在的樣子。

來源

2017-06-18 11:14:14

刪除空白的反應程序

回答

相關問題