元素之间的空间

-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

元素之间的空间

回答

相关问题