元素之间的空间

时间:2016-11-28 22:43:05

标签: html css

< p>我正在尝试删除元素之间的空格,但无论我想做什么,它似乎都不起作用。你能帮帮我一点吗?< / p> < p>我尝试手动删除标题中的边距,将所有内容放入“包装”类,然后在CSS中编辑它。但是这些似乎都没有用,只是弄乱了我的代码,如果是这样的话。 < / p为H. < p>我的代码中是否存在阻止这些解决方案正常工作的内容?< / p> < p> HTML代码:< / p> < pre>< code><!DOCTYPE html> < HTML> < HEAD> < link rel =“stylesheet”type =“text / css”href =“style.css”< < /头> <身体GT; < div class =“container”> <报头GT; < h1>我的网站< / h1> < /报头> < NAV>     < UL>         <李> NAV1< /锂>         <李> NAV2< /锂>         <李> Nav3< /锂>         < li id =“about”>关于< / li>     < / UL> < / NAV> <物品>     < H1>!欢迎< / 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坐在amet quam egestas semper。 Aenean ultricies mi vitae est.Mauris placerat eleifend leo。< / p> < /冠词GT; <页脚> 版权所有©.com < /页脚> < / DIV> < /体> < / HTML> < /代码>< /预> < p为H. CSS< / p为H. < pre>< code> .container {     宽度:1000px;     身高:800px;     边界:固体;     边框颜色:黑色;     白色空间崩溃:丢弃; } 页眉页脚 {     text-align:center;     背景:红色; } nav {     背景:蓝色;     保证金:0; } nav ul { } nav ul li {     display:inline-table;     填充:0 60px 0 0;     margin-bottom:0; }     #关于 {     漂浮:对;     } 文章{     保证金:0;     背景:黄色;     text-align:center;     填充:0; } < /代码>< /预>

4 个答案:

答案 0 :(得分:1)

这是因为您的元素按照浏览器样式表设置了样式。所以为了不进入这个,你应该使用css reset / normalize。

您可以阅读有关规范化和重置here的更多信息

<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>
JToken.Parse("mystring").ToString()

答案 1 :(得分:0)

ph1ul有默认边距,您可以将其删除:

p, h1, ul {
   margin: 0;
}

答案 2 :(得分:0)

尝试使用line-height:0;和/或margin: 0;删除标题/文字之间的空格。

答案 3 :(得分:0)

为了在不同的浏览器中保持一致(将填充和边距设置为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/