如何消除div邊框的邊距

Question

我創建了幾個div並給了它一些顏色，以便在編碼時看到更改的差異，並且看到每個框之間有一個很大的白色間距。 如何去除這些空白空間？

這裏我的小提琴：https://jsfiddle.net/Wosley_Alarico/8tgLzjeq/

HTML：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<div class="content"> 
<ul> 
    <li><a id="deposit" href="#">Deposit</a></li> 
    <li><a id="account" href="#">Account</a></li> 
    <li><a id="credit" href="#">Credit</a></li> 
</ul> 
<div class="box deposit"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio sunt voluptates reprehenderit similique nostrum eius repudiandae odio eos obcaecati doloremque quam quos, officiis veritatis blanditiis soluta molestiae iusto illo corrupti.</p> 
</div> 
<div class="box account"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio sunt voluptates reprehenderit similique nostrum eius repudiandae odio eos obcaecati doloremque quam quos, officiis veritatis blanditiis soluta molestiae iusto illo corrupti.</p> 
</div> 
<div class="box credit"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio sunt voluptates reprehenderit similique nostrum eius repudiandae odio eos obcaecati doloremque quam quos, officiis veritatis blanditiis soluta molestiae iusto illo corrupti.</p> 
</div> 
</div> 
<div id="random"> 
    <p>This is a random text</p> 
</div> 

CSS：

li{ 
    list-style:none; 
    color: white; 
    width: 30%; 
    a{ 
    color: white; 
    text-decoration: none; 
    &:hover{ 
     color: blue; 
    } 
    } 
} 
ul{ 
    background: black; 
    padding: 20px 0; 
    text-align: center; 
    display: flex; 
    justify-content: center; 
} 
.box{ 
    height: 200px; 
} 
.deposit{ 
    background-color: green; 
} 
.account{ 
    background: pink; 
} 
.credit{ 
    background: blue; 
} 
li a.active{ 
    color: red; 
} 

希望你能幫助

Answer 1

刪除p利潤，如果需要用墊襯代替他們：p{margin:0;}