Make two divs touch without minus CSS properties

Question

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>

score 3 · Accepted Answer · edited May 23 '17 at 12:09

3

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

edited May 23 '17 at 12:09

Community

1
1

answered Jul 01 '14 at 08:55

Dhaval Marthak

16,632
6
39
66

coz there is empty space between div – Amit Jul 01 '14 at 09:06

score 0 · Answer 2 · answered Jul 01 '14 at 09:04

0

Write this way http://jsfiddle.net/aLs2b/3/

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

answered Jul 01 '14 at 09:04

Amit

1,601
17
30

Thanks Amit, I appreciate the help but you have wrote exactly the same answer as Dhaval. Please check other answers before posting your own. – SaturnsEye Jul 01 '14 at 09:06

Make two divs touch without minus CSS properties

2 Answers2

Demo

Demo 2