White spaces in between each div won't go away [CSS]

Question

HTML:

<!DOCTYPE html>
<html>
        <head>
        <title>Test Menu</title>
        <link rel='stylesheet' type='text/css' href='stylesheet.css'/>
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
        <script type='text/javascript' src='script.js'></script>
        </head>
        <body>
        <a href="index.html"><div id="home">Home</div></a>
        <a href="about.html"><div id="about">About Us</div></a>
        <a href="contact.html"><div id="contact">Contact</div></a>
        </body>
</html>

stylesheet.css:

div {
    background-color: #B3B3B3;
    transition: background-color 0.5s ease;
    display:inline;
    font-size:20px;
    padding:15px;
    padding-bottom:5px;
    padding-right:7px;
    padding-left:7px;
    border:2px solid black;
    color:black;
    position:relative;
}
a{
    text-decoration:none;
}
.active {
    background-color:#556677;
}

script.js:

$(document).ready(function(){
    //hover menu
    $('div').hover(function(){
        $(this).addClass('active');
    },function(){
        $(this).removeClass('active');
    });
});

If you were to run this, it would look like this. However, I want it like that, but without any of the white space. I realize float:left; would kind of solve this, but I don't want the white space on the far left and I want the border to overlap (i.e so it doesn't join together and become 4px on the edges)

Thank you for any and all help!

EDIT: Thanks you all so much for helping, I understand my problem and how to fix it a lot more now!

try to use inline-block and remove the white space between dives [info link](http://stackoverflow.com/questions/14241696/how-to-get-rid-of-space-between-divs-when-display-inline-block-and-stacked-horiz).Don't use float until you just need the images flow following the text or versus. [the differences ](http://stackoverflow.com/questions/15172520/drawback-of-css-displayinline-block-vs-floatleft) — xff1874, Feb 28 '14 at 05:36
Don't put block-level elements (`
`) inside inline-level ones (``) for starters. — sevenseacat, Feb 28 '14 at 05:37

score 1 · Answer 1 · edited May 23 '17 at 12:03

1

This looks ugly but try this, note that there's no newline every <a>

<a href="index.html"><div id="home">Home</div></a><a href="about.html"><div id="about">About Us</div></a><a href="contact.html"><div id="contact">Contact</div></a>

Here's a fiddle demo I talked about! :D

It's because newlines are interpreted as whitespace :)

edited May 23 '17 at 12:03

Community

1
1

answered Feb 28 '14 at 05:37

Rey Libutan

5,226
9
42
73

I think, Its not a good idea. Code should be clear in separate lines. – Sushil Kandola Feb 28 '14 at 05:43
Yeah I know, it's ugly :/ – Rey Libutan Feb 28 '14 at 05:44

Sushil Kandola · Answer 2 · 2014-02-28T05:49:28.067

Define float:left; in your DIV CSS. i.e.

div {
  background-color: #B3B3B3;
  transition: background-color 0.5s ease;
  display:inline;
  font-size:20px;
  padding:15px;
  padding-bottom:5px;
  padding-right:7px;
  padding-left:7px;
  border:2px solid black;
  color:black;
  position:relative;
  float:left; 
}

Also Include below CSS for to show proper border's width :

#home { border-right:0px;}
#contact { border-left:0px;}

JsFiddle : http://jsfiddle.net/LDWGf/2/

Rohit Suthar · Answer 3 · 2014-02-28T05:43:46.057

0

try this short codes -

HTML CODE -

<div>
    <a href="index.html" id="home">Home</a>
    <a href="about.html" id="about">About Us</a>
    <a href="contact.html" class="last" id="contact">Contact</a>
</div>

CSS CODE -

div{ display:inline-block;}
a{
    float:left;
    padding:8px 15px;
    text-decoration:none;
    font-size:13px;
    color:#000;
    border:1px solid #000;
    border-right:0px;
    background:#b3b3b3;
    transition: background-color 0.5s ease;
}

.last{
    border-right:1px solid #000;
}

.active {
    background-color:#556677;
}

Resolved example - Fiddle

edited Feb 28 '14 at 05:43

answered Feb 28 '14 at 05:36

Rohit Suthar

3,528
1
42
48

that gets rid of the blank spaces in between but the one to the left is still there. also the lines double up, is there a way to make them overlap instead? – Luke-T Feb 28 '14 at 05:40
perfect except for the blank spaces above and to the left – Luke-T Feb 28 '14 at 05:59

score 0 · Answer 4 · answered Feb 28 '14 at 05:45

I have 2 solutions for this issue 1st is simply add this css

body{ font-size:0;}

and in 2nd you have 2 remove space from html like below

<a href="index.html"><div id="home">Home</div></a><a href="about.html"><div id="about">About Us</div></a><a href="contact.html"><div id="contact">Contact</div></a>

score 0 · Answer 5 · answered Feb 28 '14 at 05:52

Apart from the answers given above. You can simply wrap white-spaces with HTML comment as following:

<div>
    <a href="index.html" id="home">Home</a><!--
    --><a href="about.html" id="about">About Us</a><!--
    --><a href="contact.html" class="last" id="contact">Contact</a>
</div>

This will keep your html clean and you need not use float:left;

Checkout the JSFiddle here

Ahsan Khurshid · Accepted Answer · 2014-02-28T07:02:52.793

Edited:

First of all do not put a block level div element inside an inline element a. Use an inline element span instead of block element div

Your Issue:

You have applied css attribute display:inline on a div tag. When you use an inline elements it takes extra margins. To remove those margins there is a quick fix given below:

HTML:

<div class="nav">
    <a href="#">some text</a>
    <a href="#">some text</a>
    <a href="#">some text</a>
</div>

CSS:

.nav { 
    font-size: 0px; /* set font size 0px to remove white-space of child inline elements */ 
    overflow: hidden; /*for auto height*/ 
}

a { 
    background-color: #B3B3B3;
    transition: background-color 0.5s ease;
    display:inline-block;
    font-size:20px;
    padding:10px;
    border-top:2px solid black;
    border-bottom:2px solid black;
    border-right:2px solid black;
    color:black;
    position:relative;
    text-decoration: none;
    box-sizing: border-box;
}

a:first-child { border-left:2px solid black; }

DEMO

score 0 · Answer 7 · answered Feb 28 '14 at 06:16

I believe this is what you're looking for.

HTML

<ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About Us</a></li>
    <li><a href="contact.html">Contact</a></li>
</ul>

CSS

ul { font-size: 0; }

li { display: inline-block; }

li + li { margin-left: -2px; }

a {
    display: block;
    background: #B3B3B3;
    transition: 0.5s;
    font-size: 20px;
    padding: 15px 7px 5px;
    border: 2px solid black;
    color: black;
    text-decoration: none;
}

a:hover { background: #556677; }

To get rid of the space between the menu items, we're setting the font-size to 0 on it's parent container (the ul tag). However, since we want the font to be visible on the menu items themselves (the <a> tags), we've over-ridden the font-size on them to 20px.

To get rid of the 4px wide border between menu items, I've used the CSS adjacent-sibling selector to add a negative margin that gets rid of the extra-wide border.

I've also updated the markup structure of the menu to be more sound as well as removed the JavaScript class-powered hovers and replaced them with a pure-CSS version.

Here's a working JSFiddle: http://jsfiddle.net/galengidman/Qc9Cz/

Hope this helps.

score 0 · Answer 8 · answered Feb 28 '14 at 06:25

0

Check out this demo fiddle

What I have added is this:

a{
text-decoration:none;
float:left;
}

*{margin:0;padding:0}//to remove the start white space

answered Feb 28 '14 at 06:25

Furquan Khan

1,586
1
15
30

White spaces in between each div won't go away [CSS]

8 Answers8