要素間のスペース

-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

それは解決されていますか？そのような問題が発生したときに他の人を助けるように答えの1つを受け入れることを検討してください。 – 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

答えて

関連する問題