How to remove the gaps?

HTML & CSS
1

Hello

How to remove the gaps between div’s?

Sorry, I can’t upload picture.

This is my code:

index.html

<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
    </head>
    <body>
        <div id="red"></div>
        <div id="green"></div>
        <div id="blue"></div>
    </body>
</html>

stylesheet.css

/*
The padding is the spacing between the
content and the border. We can adjust
this value with CSS to move the border
closer to or farther from the content.
*/

div {
    display: inline-block;
    height: 100px;
    width: 200px;
    border: 1px solid black;
    margin: 0px;
}

#red {
    background-color: red;
}

#green {
    background-color: green;
}

#blue {
    background-color: blue;
}

body {
    border: 1px solid black;
    margin: 50px;
    padding: 0px;
}

html {
    border: 1px solid black;
}

Thank you!

2

One way would be to replace the display:inline-block with float:left and add height:102px to the body.

Another way would be to simply get rid of the spaces between the divs:

<div id="red">
</div><div id="green">
</div><div id="blue">
</div>
3

Thank you!

I solved this problem.

div { 
    display: inline-block;
    height: 100px;
    width: 200px;
    border: 1px solid black;
    [COLOR="#FF0000"]margin: 0px -10px 0px 0px;[/COLOR]
}

body {
    border: 1px solid black;
    margin: 50px;
    [COLOR="#FF0000"]padding: 0px;[/COLOR]
}
4

For the formaility’s sake, I would advice people to not use negative margins and paddings to fix a simple, structural flaw in the fundamentals of your code.

This is because it can lead to more problems later on and as a beginner it’s important to know how a website should be written from the bottom without using simple fixes and workarounds.

5

You are correct that the negative margins in this cases is a fragile approach because the actual gap is not known and -10px may not be correct for all. A better strategy is to use negative word-spacing using ems instead as that will never cause an overlap so you can use larger values than you need and will not cause an issue when scaled. However webkit doesn’t get this correct to another method is need for webkit.

Luckily we came up with the solution in one of our famous sitepoint quizzes and here is the complete solution for the whitespace gaps in inline block elements.


<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<style type="text/css">
html, body {
	margin:0;
	padding:0
}
.boxwrap {
	display:table;/* Webkit Fix */
	width:100%;/* set width to stop display table shrink to fit*/
	text-align:center; /* center list items*/
	word-spacing:-.25em; /* hide whitespace nodes in all modern browsers (not for webkit) - unlike negative margins words will never overlap even if zoomed*/
}
.box {
	display: inline-block;
 *display:inline;/* ie6/7 fix*/
 *zoom:1.0;/* ie6/7 fix*/
	vertical-align:middle;
	height: 100px;
	width: 200px;
	border: 1px solid black;
	margin: 0px;
	word-spacing:0; /* reset from parent */
}
#red { background-color: red; }
#green { background-color: green; }
#blue { background-color: blue; }
</style>
</head>
<body>
<div class="boxwrap">
		<div class="box" id="red"> This is a test</div>
		<div class="box" id="green">This is a test</div>
		<div class="box" id="blue">This is a test</div>
</div>
</body>
</html>

Unlike other solutions using font-size:0 (bootstrap for example) it does not cause inheritance issues and is much more stable.

to fix a simple, structural flaw in the fundamentals of your code.

I wouldn’t say it was a structural flaw as such but rather an unwanted side behaviour of using inline-block (which in a lot of cases is much more preferable to floating elements.) :slight_smile:

6

I looked at the problem as more of a very basic, unwanted position of the elements rather than a problem with how they positioned by scaling the website. Maybe I misinterpreted.

…unwanted side behaviour of using inline-block (which in a lot of cases is much more preferable to floating elements.)

Yes I agree.

7