CODEWITHSUNDEEP
htmlcssmargin
Olly F
Olly F

Reputation: 2869

Why is there a tiny margin appearing to the right of my DIV?

I have a large DIV of 586px width. Within this are two smaller DIVs, both 266px width.

When I preview the page though, there's a small margin in between them. I've tried troubleshooting this with Inspect Element, but not found any extra margins in the metrics.

screengrab from Safari

The CSS:

#category-results { width: 586px; height: 1000px; background-color: fuchsia; }

.category-item-full { height: 158px; width: 266px; background-color: green; position: relative; display: inline-block; margin: 0px; }

The HTML:

<div id="category-results">

                    <div class="category-item-full">
                    </div>

                    <div class="category-item-full">
                    </div>

</div>

Upvotes: 1

Views: 2222

Answers (4)

gcbenison
gcbenison

Reputation: 11963

Try getting rid of display: inline-block and replacing with float: left. Seems to work, and is standard CSS unlike "inline-block".

Upvotes: 0

ThisIsNotAnId
ThisIsNotAnId

Reputation: 197

Try CSS resets. Here's one to get you started: CSS Tools: Reset CSS. And, feel free to google away "CSS reset." Finally, the tuts+ network is very helpful.

Upvotes: 0

lorenzo-s
lorenzo-s

Reputation: 17010

Remove display: inline-block; in your CSS.
Or, if you need it, remove white space between <div>s in HTML:

<div class="category-item-full">
</div><div class="category-item-full">
</div>

Upvotes: 3

j08691
j08691

Reputation: 208002

It's because you have empty white space between your divs. Tighten them up and it goes away. Example jsFiddle.

Upvotes: 1

Related Questions