Benjen
Reputation: 2925
How to remove mysterious spacing between layout level elements
For some reason I am getting spacing appearing between several layout level elements on a page (see fiddlejs example). The result I am after is to have elements (marked by different colored backgrounds) flushed with each other (i.e. no spacing should exist between them). I have not been able to find any explanation for why this spacing is occurring.
.layout-content {
background-color: gainsboro;
}
aside {
background-color: pink;
}
header {
background-color: chocolate;
}
main {
background-color: peachpuff;
}
footer {
background-color: orange; }<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>Upvotes: 1
Views: 257
Answers (3)
Alejandro Loayza Barazorda
Reputation: 1
Extending a little bit the answer of Oriol: You have some headings (h1-h6) which are rendered in different ways by different browser. You can reset this styles manually or you can link a css file to your html or import it to your css or scss file.
Here are some css libraries that reset: reset.css and normalize.css
Upvotes: 0
Siva Kumar
Reputation: 725
You can start looking at developer tools of chrome where you can understand more about rendering of html elements.. Check the image attached for one such instance. Your h2(id="block-bens-main-menu-menu") tag has by default margin-top & margin-botom values which is actually creating the space. Investigate more by yourself ;)
Upvotes: 3
Oriol
Reputation: 288010
You have some headers, which on most browsers have some margin by default.
You can use this CSS reset:
* {
margin: 0;
}
* {
margin: 0;
}
.layout-content {
background-color: gainsboro;
}
aside {
background-color: pink;
}
header {
background-color: chocolate;
}
main {
background-color: peachpuff;
}
footer {
background-color: orange;
}<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>Upvotes: 1
Related Questions
- How do I get rid of the phantom spacing on my HTML page?
- Unwanted spacing between html elements
- Where is this space coming from between two elements?
- CSS layout fills missing space
- Weird space in HTML & CSS design - can't get rid of it
- css creating a big gap in layout issue
- Unwanted extra right space in HTML layout
- Strange spacing in HTML
- Mysterious Padding
- How to fix mystery padding gap between html elements?