html - 删除 2 div 之间的间隙

Question

我正在为一个小元素使用 material css，特别是卡片。我有 2 cards在我的页面中，并希望删除它们之间的空格。我认为我会相当琐碎，但似乎无法将任何 css 应用于我的内容。这是我的代码:

<div class="container">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <div class="card-panel blue accent-3">
                    <div class="card-content">
                        <span class="card-title white-text"><i class="fa fa-bars" aria-hidden="true">
                            </i> title</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="row" id="second">
            <div class="col-md-6 col-md-offset-3">
                <div class="card-panel white blue-text">
                    <div class="card-content">
                        <ul>
                            <li><a href="#">report 1</a></li>
                            <li><a href="#">report 2</a></li>
                            <li><a href="#">report 3</a></li>
                            <li><a href="#">report 4</a></li>
                            <li><a href="#">report 5</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

CSS:

<style type="text/css">
    body {
        background-color: #e7e6ef;
    }
    .row {
        width: 500px;
        margin-left: 50%;
    }
    #second {
        margin-top: 0; !important;
    }
</style>

外观:

但是我似乎无法消除两张卡片之间的间隙，也无法将它们居中。非常感谢任何帮助

Answer 1

您必须为 .row 和 .card-panel 设置边距:

.row{
    margin-bottom: 0px !important;
}

.card-panel {
    margin-bottom: 0px !important;
    margin-top: 0px !important;
}

这是一个有效的 fiddle