Question

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.

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>

Answer 1

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>