Home/ Questions/Q 3301308
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-17T20:44:20+00:00

Here is the code i’m working on it’s not a page it’s a treasure

  • 0

Here is the code i’m working on it’s not a page it’s a treasure hunt for what might be re-used in a page, I ran into this problem last week or so and I’m asking myself what the heck is this margin for a while here

Let’s picture that I can’t use the float:left; tag for a reason, when I use display:inline-block; a weird margin apears on the elements (say divs) how do I fix it?

Problem is on FF3, and IE8 never tested in other browsers but if it dos not work on these what will it work on?

Original Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Why does that happen</title>
<style type="text/css">

* {padding:0px; margin:0 auto;
vertical-class:baseline;
text-class:left;}

body {padding:0px; margin:0 auto;}

div{margin: 0 auto;}

div div{margin: 0;}

.body {background:#CCC; width:900px; }

.red {background:#F00;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}

.blue {background:#03F;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}

.green {background:#090;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}

.light-blue {background:#39F;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}

.light-green {background:#9FC;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}

.heavy-red {background:#C00;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}

</style>
</head>
<body>

<div class="body">


    <div class="red"></div>
    <div class="blue"></div>
    <div class="green"></div>
    <div class="light-blue"></div>
    <div class="light-green"></div>
    <div class="heavy-red"></div>





</div>


</body>
</html>

Solved: solution is eliminate the spacing in the markup:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Why does that happen</title>
<style type="text/css">

* {padding:0px; margin:0 auto;
vertical-class:baseline;
text-class:left;}

body {padding:0px; margin:0 auto;}

div{margin: 0 auto;}

div div{margin: 0;}

.body {background:#CCC; width:900px; }

.red {background:#F00;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}

.blue {background:#03F;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}

.green {background:#090;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}

.light-blue {background:#39F;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}

.light-green {background:#9FC;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}

.heavy-red {background:#C00;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}

</style>
</head>
<body>

<div class="body">


    <div class="red"></div><div class="blue"></div><div class="green"></div><div class="light-blue"></div><div class="light-green"></div><div class="heavy-red"></div>

</div>


</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The problem is caused by spaces in the markup between the divs. If you don’t want to float them (why not I wonder), you have a couple of options.

    1. Remove the spaces so that the markup is all on the same line.

    2. If you don’t ever want any text to appear in these divs then you can do this

      div{font-size:0;}

    • 0