元素之間的空間

-1

我試圖刪除我的元素之間的空白空間，但無論我試圖做什麼，它似乎都不起作用。你們能幫我一下嗎？元素之間的空間

我已經嘗試過從標題中手動刪除邊距，將所有內容放入「包裝」類中，然後在CSS中進行編輯。但似乎沒有任何工作，只是搞亂了我的代碼，如果是的話。

我的代碼中是否有某些東西阻止這些解決方案正常工作？

HTML代碼：

<!DOCTYPE html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="style.css"< 
</head> 

<body> 

<div class="container"> 
<header> 
<h1>My website</h1> 
</header> 

<nav> 
    <ul> 
     <li>Nav1</li> 
     <li>Nav2</li> 
     <li>Nav3</li> 
     <li id="about">About</li> 
    </ul> 
</nav> 

<article> 
    <h1>Welcome!</h1> 
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> 
</article> 

<footer> 
Copyright © .com 
</footer> 

</div> 
</body> 

</html>

CSS

.container { 
    width: 1000px; 
    height: 800px; 
    border: solid; 
    border-color: black; 
    white-space-collapsing: discard; 


} 

header, footer { 
    text-align: center; 
    background: red; 


} 


nav { 
    background: blue; 
    margin: 0; 

} 
nav ul { 

} 

nav ul li { 
    display: inline-table; 
    padding: 0 60px 0 0; 
    margin-bottom: 0; 
} 
    #about { 
    float: right; 
    } 



article { 

    margin: 0; 
    background: yellow; 
    text-align: center; 
    padding: 0; 

}

來源

2016-11-28 Gene Parmesan

你是什麼意思「項目之間的空間」是什麼意思？你的意思是在我的網站，導航和歡迎標題之間？ – YOU

它解決了嗎？？考慮接受其中一個答案，以便在發生這種問題時幫助他人 – Geeky

爲了使事物在不同瀏覽器中保持一致（設置填充和邊距爲0，相同的字體大小等），可以包含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; 
}

http://meyerweb.com/eric/tools/css/reset/

來源

2016-11-28 22:54:31 RSquared

謝謝，作品出色！ –

那是因爲你的元素風格按瀏覽器的樣式表。所以爲了不進入這個，你應該使用css reset/normalize。

你可以閱讀更多關於規範和復位here

h1, ul, p{ 
 
    margin:0; 
 
} 
 
.container { 
 
    width: 1000px; 
 
    height: 800px; 
 
    border: solid; 
 
    border-color: black; 
 
    white-space-collapsing: discard; 
 
} 
 
header, 
 
footer { 
 
    text-align: center; 
 
    background: red; 
 
} 
 
nav { 
 
    background: blue; 
 
    margin: 0; 
 
} 
 
nav ul {} nav ul li { 
 
    display: inline-table; 
 
    padding: 0 60px 0 0; 
 
    margin-bottom: 0; 
 
} 
 
#about { 
 
    float: right; 
 
} 
 
article { 
 
    margin: 0; 
 
    background: yellow; 
 
    text-align: center; 
 
    padding: 0; 
 
}

<div class="container"> 
 
    <header> 
 
    <h1>My website</h1> 
 
    </header> 
 

 
    <nav> 
 
    <ul> 
 
     <li>Nav1</li> 
 
     <li>Nav2</li> 
 
     <li>Nav3</li> 
 
     <li id="about">About</li> 
 
    </ul> 
 
    </nav> 
 

 
    <article> 
 
    <h1>Welcome!</h1> 
 
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. 
 
     Mauris placerat eleifend leo.</p> 
 
    </article> 
 

 
    <footer> 
 
    Copyright © .com 
 
    </footer> 
 

 
</div>

來源

2016-11-28 22:48:49 Sreekanth

p，h1，ul有默認邊距，則可以將其刪除：

p, h1, ul { 
    margin: 0; 
}

來源

2016-11-28 22:49:02 Troyer

嘗試line-height:0;和/或margin: 0;刪除標題/文本之間的空格。

來源

2016-11-28 22:49:57 YOU

元素之間的空間

回答

相關問題