Delete white space between divs
You get whitespace there because you have whitespace inbetween the divs. Whitespace between inline elements is interpreted as a space.
You have:
<div id="left_side">
<div id="plan">
<h1>div 1</h1>
</div>
</div>
<div id="right_side">
<div id="news">
<h1>div 2</h1>
</div>
</div>
Change for:
<div id="left_side">
<div id="plan">
<h1>div 1</h1>
</div>
</div><div id="right_side">
<div id="news">
<h1>div 2</h1>
</div>
</div>
However, this is a bad way to do what you want to do.
You should float the elements if thats what you want to do.
How to remove white space between div elements
h1, h2, p {
margin: 0;
}
Browser adds margins
on heading elements and paragraphs by default. You remove it via CSS.
How to remove an invisible space between div tags
I've finaly found the problem thanks to all of You but especialy thanks to Notepad++
The problem was caused by the invisible blank spaces (from the SPACE key).
I don't know why, but according to my knowlege this is the first time multiple space strokes to be detected by the browser.. I guess the newer browsers now are registerng more then one blank space after another.
I just opened the html scripts with Notepad++ and set from View->Show Simbol->Show All Characters. Then i've deleted all of the unneccessery empty spaces and that solved my problem.
How to remove space between div elements?
There is a gap because div
is block element, if you want to remove the gap between div
use display: inline-block
to remove it.
body > div { display: inline-block; }
This will display an element as an inline-level block container. Please refer to CSS Display
How to remove space between divs?
try Reset CSS
demo
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;
}
How can I remove white space between divs?
The <ul>
element is part of the problem. You should add this style to it
.AMSI {
margin-bottom: 0;
padding-bottom: 0;
}
this by itself does not fix it. However, there is a stray <p></p>
on the page, just after this <ul>
element.
You should remove this <p>
tag (assuming it's empty because you are not using it.)
This <p>
tag has a margin-bottom of 1rem which is causing the white space
Remove Spacing Between Divs
Simple remove width: 600px
from child in the middle
.playhouserentals { background-size: cover; background-image: url('http://via.placeholder.com/500x500'); height: 500px;}
.playhouserentals2 { background-size: cover; background-image: url('http://via.placeholder.com/500x500'); height: 500px;}
.playhousetitle { font-weight: bold; color: #605e5e;}
.playhouserentalssect { /* width: 600px; --- remove this */ height: 500px; display: flex; margin: 0 auto; align-items: center; justify-content: center; text-align: justify; background-color: #dbdbdb;}
.playhouserentalscard { width: 400px; border: 1px solid #000; -webkit-box-shadow: 10px 10px 5px -4px rgba(0, 0, 0, 0.6); -moz-box-shadow: 10px 10px 5px -4px rgba(0, 0, 0, 0.6); box-shadow: 10px 10px 5px -4px rgba(0, 0, 0, 0.6); "
}
<link href="https://www.w3schools.com/lib/w3.css" rel="stylesheet" /><div class="w3-row w3-container"> <div class="w3-col l4 playhouserentals"> </div> <div class="w3-col l4"> <div class="playhouserentalssect"> <div class="w3-padding-large w3-white playhouserentalscard"> <h2 class="cursive playhousetitle">Rentals</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In erat mauris, feugiat id tristique suscipit, tincidunt sit amet mauris. Duis eget velit in dolor fermentum placerat aliquet nec lacus. Morbi pulvinar magna placerat, rutrum massa a, eleifend turpis.</p> <p class="w3-right"><a href="page/2/rental" class="infolink">Rental Info</a> <span class="fa fa-angle-double-right infoarrow" aria-hidden="true"></span></p> </div> </div> </div> <div class="w3-col l4 playhouserentals2"> </div></div>
remove space between divs
Why is there a space between the two div tags?
You can read more about it in Fighting the Space Between Inline Block Elements
To remove the undesired blank space, set font-size: 0
in the .row
element, and then restore the font-size
in the .item
.
.row {
font-size: 0;
}
.item {
font-size: 12px;
}
Since your margins are using the the em
unit, if you simple set the font-size: 0
in the wrapper element, your margins will disappear aswell.
To keep your margins, it's important to restore the font-size in the inner element or set the margins using another unit that is not based on the font-size, like px
.
Following is an example:
.row { background-color: red; margin: 2em 0; display: block; text-align: center; white-space: nowrap; -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, .6) inset; box-shadow: 0 1px 5px rgba(0, 0, 0, .6) inset; font-size: 0;}.item { font-size: 12px; background-color: silver; width: 50%; white-space: normal; display: inline-block;}.sub-item { background-color: royalblue; margin: .5em; width: 100px; height: 100px; text-align: center; display: inline-block;}
<div class='row'> <div class="item"> <div class="sub-item"></div> <div class="sub-item"></div> <div class="sub-item"></div> <div class="sub-item"></div> <div class="sub-item"></div> </div> <div class="item"> <div class="sub-item"></div> <div class="sub-item"></div> <div class="sub-item"></div> <div class="sub-item"></div> <div class="sub-item"></div> </div></div>
How to remove unwanted space between these two DIVs?
Just insert h1 {margin:0px}
in your stylesheet and it will work.
In my example the property is sitting at the top.
Example
Related Topics
Css Absolute Position With X Scrolling
How to Make CSS Grid Items Take Up Remaining Space
Insert Line Break After Each Tr Tag Row
Text Cutting Inside Large Select Option Dropdown
Angular 2: Get Position of HTML Element
Regex Match Open Tags Except Xhtml Self-Contained Tags
How to Style the Option of an HTML "Select" Element
Proper Use of Flex Properties When Nesting Flex Containers
Why Do Browsers Match CSS Selectors from Right to Left
Limit File Format When Using ≪Input Type="File"≫
How to Embed an External Webpage Without Using Iframe
Using Mailto to Send Email With an Attachment
Inserting an Image from Local Directory in Thymeleaf Spring Framework (With Maven)
Responsive Fullscreen Youtube Video With No Black Bars
How to Remove the Space Between Inline/Inline-Block Elements
Css When Inline-Block Elements Line-Break, Parent Wrapper Does Not Fit New Width