Margin after Divs, where does it come from?

Question

I am trying to build a timeline to display a series of events, between each event is a margin which I cannot work out where it has come from, for visual purposes I have the code here: http://codepen.io/tomevans1664/pen/obvWyW

HTML:

<div class="center">
        <div class="timeline-wrapper">

            <div class="event">
                <div class="event-date"></div>
                <div class="event-marker"></div>
                <h3 class="event-title">Experiment Created</h3>
                <p class="event-description"></p>
                <img class="event-img" alt="" src="">
            </div>

            <div class="event">
                <div class="event-date"></div>
                <div class="event-marker"></div>
                <h3 class="event-title">Experiment Updated</h3>
                <p class="event-description"></p>
                <img class="event-img" alt="" src="">
            </div>

        </div>
    </div>

CSS:

body{
    margin: 0;
    padding: 0;
}
.center{
    margin-left: auto;
    margin-right: auto;
    width: 800px;
    height: 500px;
    border: 1px solid #dddddd;
}
.timeline-wrapper{
    position: absolute;
    height: inherit;
    width: inherit;
}
.timeline-wrapper::before {
  /* this is the vertical line */
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    height: 100%;
    width: 5px;
    background: #d7e4ed;
}

.event {
    width: 100%;
    height: 100px;
    background-color: #e8e8e8;
}

You have collapsing margins: http://www.sitepoint.com/web-foundations/collapsing-margins/ — yunzen, Dec 02 '15 at 11:04

score 2 · Answer 1 · edited May 23 '17 at 12:30

2

It's coming from the default margin applied to the headings (h3)

Just add this

h3 {
  margin: 0;
}

More commonly, a "universal reset" is used rather than just on the body :

* {
  margin: 0;
}

Codepen Demo

Related: SO Question

edited May 23 '17 at 12:30

Community

1
1

answered Dec 02 '15 at 10:43

Paulie_D

107,962
13
142
161

score 0 · Answer 2 · answered Dec 02 '15 at 10:51

0

Its coming from the header tag h3. You can add

.event-title { margin:0px; }

If you want to remove default margin, padding etc. You can use reset.css

Hope this helps!

answered Dec 02 '15 at 10:51

John Roca

1,204
1
14
27

Margin after Divs, where does it come from?

2 Answers2