SaturnsEye SaturnsEye - 4 years ago 162
CSS Question

Make two divs touch without minus CSS properties

I am creating a set of "step" divs to show progress through a page and I want these two divs to sit flush against each other but they have a couple pixels between them. I thought

margin
and
padding
0px would of fixed it but it does nothing.

I would like to achieve this without adding minus properties to the CSS

EXAMPLE

CSS:

.step {
width: 20px;
height: 20px;
background: white;
border: 1px red solid;
display:inline-block;
padding:0px;
margin:0px;
}

.line {
height:1px;
width:20px;
background:#717171;
border-bottom:0px solid #313030;
display:inline-block;
padding:0px;
margin:0px;
}


HTML:

<div class="step"></div>
<div class="line"></div>

Answer Source

Change your markup to this:

<div class="step"></div><!--
--><div class="line"></div>

As inline-block elements leaves space in between so this might be a hack for the same.

You can see the reference here with explanation.

Or

You can make it in one line

<div class="step"></div><div class="line"></div>

Demo

Demo 2

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download