Wie man den Rand der Div-Boxen zu beseitigen

Question

Ich habe ein paar div erstellt und gab einige Farben, um den Unterschied auf Änderungen zu sehen, wie ich Code und sehe, dass es einen großen weißen Abstand zwischen jeder Box ist. Wie kann ich diese Leerzeichen entfernen?

Hier meine Geige: 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; 
} 

Hoffnung, die Sie

Answer 1

entfernen Sie die p Margen und mit Polsterungen ersetzen, wenn nötig helfen : p{margin:0;}