1

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;
}
3

2 Answers 2

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

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!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.