Question

我正在尝试构建一个时间轴来显示一系列事件，每个事件之间都是一个边缘，我无法解决它来自哪里，出于视觉目的我在这里有代码：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;
}

Answer 1

它来自应用于标题的默认保证金（h3）

只需添加此

即可

h3 {
  margin: 0;
}

更常见的是，＆＃34;通用重置＆＃34;使用而不仅仅是身体：

* {
  margin: 0;
}

Codepen Demo

相关：SO Question

Answer 2

它来自标头标签h3。你可以添加

.event-title { margin:0px; }

如果要删除默认边距，填充等，可以使用reset.css

希望这有帮助！

Divs之后的保证金，它来自哪里？

2 个答案: