如何删除布局级元素之间的神秘间距

时间：2015-02-14 15:28:32

标签： html css html5

出于某种原因，我在页面上的几个布局级别元素之间出现间距（请参阅fiddlejs example）。我所追求的结果是使元素（由不同颜色的背景标记）相互冲洗（即它们之间不应存在间距）。我无法找到解释为什么会出现这种间距的原因。

＆＃13;
＆＃13; 
.layout-content {
  background-color: gainsboro; 
}

aside {
  background-color: pink; 
}

header {
  background-color: chocolate; 
}

main {
  background-color: peachpuff; 
}

footer {
  background-color: orange; }
＆＃13; 
<body class="path-node node--type-page">
  <div class="layout-container">
    <header role="banner">
      <div class="name-and-slogan">
         <strong class="site-name">
           <a href="http://awesome.dev/" title="Home" rel="home">awesome.dev</a>
         </strong>
      </div>    
    </header>
    <main role="main">
      <div class="layout-content">
        <div class="region region-primary-menu">
          <nav id="block-bens-main-menu" class="contextual-region block block-menu navigation menu--main" role="navigation" aria-labelledby="block-bens-main-menu-menu">
            <h2 id="block-bens-main-menu-menu" class="visually-hidden">Main navigation</h2>
            <div data-contextual-id="block:block=bens_main_menu:|menu:menu=main:"></div>
          </nav>
        </div>
        <nav class="breadcrumb" role="navigation" aria-labelledby="system-breadcrumb">
          <h2 id="system-breadcrumb" class="visually-hidden">Breadcrumb</h2>
        </nav>
        <h1><span data-quickedit-field-id="node/1/title/en/full" class="field field-node--title field-name-title field-type-string field-label-hidden">First Page</span></h1>
        <div class="region region-content">
          <div id="block-bens-content" class="block block-system">
            <article data-history-node-id="1" data-quickedit-entity-id="node/1" role="article" class="contextual-region node node--type-page node--view-mode-full" about="/node/1" typeof="schema:WebPage">
              <div data-contextual-id="node:node=1:changed=1423727643"></div>  <span property="schema:name" content="First Page" class="hidden"></span>
                <div class="node__content">
                  <div data-quickedit-field-id="node/1/body/en/full" class="clearfix field field-node--body field-name-body field-type-text-with-summary field-label-hidden">
                    <div class="field-items">
                      <div property="schema:text" class="field-item">
                        <p>Blocks in Drupal 8 are actually made up of two separate API structures to create a user experience similar to what Drupal has maintained in past terations. These two APIs are the Block Plugin API, which is a tand-alone reusable API and the Block Entity API which is a Drupal 8 pecific use case of block placement and visibility control.</p>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="node__links"></div>
            </article>
          </div>
        </div>
      </div>
      <aside class="layout-sidebar-first" role="complementary">
        <div class="region region-sidebar-first">
          <div id="block-bens-login" class="contextual-region block block-user" role="form">
            <h2>User login</h2>
            <div data-contextual-id="block:block=bens_login:"></div>
            <form class="user-login-form" action="/node/1?destination=node/1" method="post" id="user-login-form" accept-charset="UTF-8">
              <div class="form-item form-type-textfield form-item-name">
                <label for="edit-name" class="form-required">Username</label>
                <input autocorrect="off" autocapitalize="off" spellcheck="false" aria-describedby="edit-name--description" id="edit-name" name="name" size="15" maxlength="60" class="form-text required" required="required" aria-required="true" type="text">
              </div>
              <div class="form-item form-type-password form-item-pass">
                <label for="edit-pass" class="form-required">Password</label>
                <input aria-describedby="edit-pass--description" id="edit-pass" name="pass" size="15" maxlength="128" class="form-text required" required="required" aria-required="true" type="password">
              </div>
                <input name="form_build_id" value="form-ubxpmZ4n7PBE7JFYvmxsoutesVPNmEkyTHj83_aY-6c" type="hidden">
                <input name="form_id" value="user_login_form" type="hidden">
              <div class="form-actions form-wrapper" id="edit-actions">
                <input id="edit-submit" name="op" value="Log in" class="button form-submit" type="submit">
              </div>
            </form>
          </div>
        </div>
      </aside>
  </main>
  <footer role="contentinfo">
    <div id="footer-columns" class="clearfix">
      <div class="layout-footer-firstcolumn">  
        <div class="region region-footer-firstcolumn">
          <div data-quickedit-entity-id="block_content/1" id="block-footerone-2" class="contextual-region block block-block-content">
            <h2>Footer One</h2>
            <div data-contextual-id="block:block=footerone_2:|block_content:block_content=1:changed=1423742303"></div>
            <div data-quickedit-field-id="block_content/1/body/en/full" class="clearfix field field-block-content--body field-name-body field-type-text-with-summary field-label-hidden">
              <div class="field-items">
                <div class="field-item">
                  <p>Assertively restore backend meta-services through intermandated methodologies. Rapidiously reintermediate client-focused scenarios after cost effective partnerships.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="layout-footer-secondcolumn"></div>
      <div class="layout-footer-thirdcolumn"></div>
      <div class="layout-footer-fourthcolumn"></div>
    </div>
  </footer>
</div>
</body>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：3)

您可以开始查看chrome的开发人员工具，您可以在其中了解有关html元素渲染的更多信息。查看附加的图像以获取一个此类实例。您的h2（id =“block-bens-main-menu-menu”）标签默认为margin-top＆amp; margin-botom值实际上创造了空间。自己调查一下;） enter image description here

答案 1 :(得分：1)

你有一些标题，默认情况下，大多数浏览器都有一些标题。

您可以使用此CSS重置：

* {
    margin: 0;
}

＆＃13;
＆＃13; 
* {
  margin: 0;
}
.layout-content {
  background-color: gainsboro;
}
aside {
  background-color: pink;
}
header {
  background-color: chocolate;
}
main {
  background-color: peachpuff;
}
footer {
  background-color: orange;
}
＆＃13; 
<div class="layout-container">
  <header role="banner">
    <div class="name-and-slogan">
      <strong class="site-name">
        <a href="http://awesome.dev/" title="Home" rel="home">awesome.dev</a>
      </strong>
    </div>
  </header>
  <main role="main">
    <div class="layout-content">
      <div class="region region-primary-menu">
        <nav id="block-bens-main-menu" class="contextual-region block block-menu navigation menu--main" role="navigation" aria-labelledby="block-bens-main-menu-menu">
          <h2 id="block-bens-main-menu-menu" class="visually-hidden">Main navigation</h2>
          <div data-contextual-id="block:block=bens_main_menu:|menu:menu=main:"></div>
        </nav>
      </div>
      <nav class="breadcrumb" role="navigation" aria-labelledby="system-breadcrumb">
        <h2 id="system-breadcrumb" class="visually-hidden">Breadcrumb</h2>
      </nav>
      <h1><span data-quickedit-field-id="node/1/title/en/full" class="field field-node--title field-name-title field-type-string field-label-hidden">First Page</span></h1>
      <div class="region region-content">
        <div id="block-bens-content" class="block block-system">
          <article data-history-node-id="1" data-quickedit-entity-id="node/1" role="article" class="contextual-region node node--type-page node--view-mode-full" about="/node/1" typeof="schema:WebPage">
            <div data-contextual-id="node:node=1:changed=1423727643"></div> <span property="schema:name" content="First Page" class="hidden"></span>
            <div class="node__content">
              <div data-quickedit-field-id="node/1/body/en/full" class="clearfix field field-node--body field-name-body field-type-text-with-summary field-label-hidden">
                <div class="field-items">
                  <div property="schema:text" class="field-item">
                    <p>Blocks in Drupal 8 are actually made up of two separate API structures to create a user experience similar to what Drupal has maintained in past terations. These two APIs are the Block Plugin API, which is a tand-alone reusable API
                      and the Block Entity API which is a Drupal 8 pecific use case of block placement and visibility control.</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="node__links"></div>
          </article>
        </div>
      </div>
    </div>
    <aside class="layout-sidebar-first" role="complementary">
      <div class="region region-sidebar-first">
        <div id="block-bens-login" class="contextual-region block block-user" role="form">
          <h2>User login</h2>
          <div data-contextual-id="block:block=bens_login:"></div>
          <form class="user-login-form" action="/node/1?destination=node/1" method="post" id="user-login-form" accept-charset="UTF-8">
            <div class="form-item form-type-textfield form-item-name">
              <label for="edit-name" class="form-required">Username</label>
              <input autocorrect="off" autocapitalize="off" spellcheck="false" aria-describedby="edit-name--description" id="edit-name" name="name" size="15" maxlength="60" class="form-text required" required="required" aria-required="true" type="text">
            </div>
            <div class="form-item form-type-password form-item-pass">
              <label for="edit-pass" class="form-required">Password</label>
              <input aria-describedby="edit-pass--description" id="edit-pass" name="pass" size="15" maxlength="128" class="form-text required" required="required" aria-required="true" type="password">
            </div>
            <input name="form_build_id" value="form-ubxpmZ4n7PBE7JFYvmxsoutesVPNmEkyTHj83_aY-6c" type="hidden">
            <input name="form_id" value="user_login_form" type="hidden">
            <div class="form-actions form-wrapper" id="edit-actions">
              <input id="edit-submit" name="op" value="Log in" class="button form-submit" type="submit">
            </div>
          </form>
        </div>
      </div>
    </aside>
  </main>
  <footer role="contentinfo">
    <div id="footer-columns" class="clearfix">
      <div class="layout-footer-firstcolumn">
        <div class="region region-footer-firstcolumn">
          <div data-quickedit-entity-id="block_content/1" id="block-footerone-2" class="contextual-region block block-block-content">
            <h2>Footer One</h2>
            <div data-contextual-id="block:block=footerone_2:|block_content:block_content=1:changed=1423742303"></div>
            <div data-quickedit-field-id="block_content/1/body/en/full" class="clearfix field field-block-content--body field-name-body field-type-text-with-summary field-label-hidden">
              <div class="field-items">
                <div class="field-item">
                  <p>Assertively restore backend meta-services through intermandated methodologies. Rapidiously reintermediate client-focused scenarios after cost effective partnerships.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="layout-footer-secondcolumn"></div>
      <div class="layout-footer-thirdcolumn"></div>
      <div class="layout-footer-fourthcolumn"></div>
    </div>
  </footer>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

延伸一点Oriol的答案：你有一些标题（h1-h6），它们由不同的浏览器以不同的方式呈现。您可以手动重置此样式，也可以将css文件链接到html或将其导入到css或scss文件中。

以下是一些重置的css库：reset.css和normalize.css

相关问题
最新问题