昨天的文章我們有提到留白的部分，但是不是所有的留白都是我們要的，我們可以使用Google瀏覽器的開發人員工具去找出我們不想要的留白，這時為了要消除它，我們回到CSS並在.card-title中輸入:

  .card-body {
    padding: 20px 20px;
}

如法炮製，

.card-title {
    margin-top: 0;
    margin-bottom: 0;
}
.card-text {
    margin-top: 0;
    margin-bottom: 0;
}

我們將card-title及card-text的留白也一併消除。

版面更動:在我的範例檔案中，我已經將三個Card 用card-list 關聯再一起，因此只要在css中改動.card-list 就可以同時改變三個的版型

.card-list {
    display: flex;
    justify-content: center; 
    flex-wrap: wrap; 
}

display:flex 的意思是將版面橫著擺
justify-content:center 是置中
flex-warp:warp 是不隨著瀏覽器大小而更動

這時回到我們的網頁就可以看到留白被消。明天我將會介紹更多CSS 讓網頁看起來更漂亮。