Zu viel Platz auf der Box - HTML

Question

Ich habe eine Box here erstellt.

aber der Raum ist zu viel auf der Oberseite und der Unterseite.

Siehe Bild hier:

Wie kann ich den zusätzlichen Abstand zwischen den oberen und unteren Rand des zu entfernen:
1.Title und das Datum
2. Die Taste und der Text
3. Die Taste und der zusätzliche Abstand unter

Hier ist mein HTML:

<div class="col-1-3"><img src="http://www.iliveaccountable.com/wp-content/uploads/2016/11/iliveaccountable.jpg" alt="" /> 
<h3 style="font-family: 'Montserrat'; text-align: center;">TAKING IT TO THE SOURCE</h3> 
<h4 style="font-family: 'Montserrat'; text-align: center;">11/13/2016</h4> 
<a href="http://www.iliveaccountable.com/oldsite/iliveconnected-patterns/" target="_blank"> 
<button class="btn btn-block btn-primary">Watch Video</button> 
</a> 
</div> 

Hier ist meine CSS:

h4 { 
    text-align: center; 
} 
.col-1-3 { 
    padding: 10px; 
    width: 28%; 
    float: left; 
margin: 1%; 
border: 1px solid #dedede; 
-webkit-border-radius: 7px; 
-moz-border-radius: 7px; 
border-radius: 7px; 
} 
.col-1-3 img { 
    width: 100%; 
} 

.btn-block{ 
    display: block; 
    width: 100%; 
} 
@media only screen and (max-width: 767px) { 
    .col-1-3 {width: 44%;} 

} 
@media only screen and (max-width: 590px) { 
    .col-1-3 {width: 94%;} 

} 

Ich mag gerade genug Platz haben, aber dieser Abstand ist zu viel.

Answer 1

Make margin und padding 0 für alle Elemente innerhalb div.col-1-3

Check diese Schnipsel

h4 { 
 
    text-align: center; 
 
} 
 
.col-1-3 * { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.col-1-3 { 
 
    width: 28%; 
 
    float: left; 
 
    margin: 1%; 
 
    border: 1px solid #dedede; 
 
    -webkit-border-radius: 7px; 
 
    -moz-border-radius: 7px; 
 
    border-radius: 7px; 
 
} 
 
.col-1-3 img { 
 
    width: 100%; 
 
} 
 
a { 
 
    margin: 0; 
 
} 
 
h3 { 
 
    margin: 0; 
 
} 
 
h4 { 
 
    margin: 0; 
 
} 
 
.btn-block { 
 
    display: block; 
 
    width: 100%; 
 
} 
 
@media only screen and (max-width: 767px) { 
 
    .col-1-3 { 
 
    width: 44%; 
 
    } 
 
} 
 
@media only screen and (max-width: 590px) { 
 
    .col-1-3 { 
 
    width: 94%; 
 
    } 
 
}

<div class="col-1-3"> 
 
    <img src="http://www.iliveaccountable.com/wp-content/uploads/2016/11/iliveaccountable.jpg" alt=""> 
 
    <h3 style="font-family: 'Montserrat'; text-align: center;">TAKING IT TO THE SOURCE</h3> 
 
    <h4 style="font-family: 'Montserrat'; text-align: center;">11/13/2016</h4> 
 
    <p> 
 
    <a href="http://www.iliveaccountable.com/oldsite/iliveconnected-patterns/" target="_blank"> 
 
     <button class="btn btn-block btn-primary">Watch Video</button> 
 
    </a> 
 
    </p> 
 
</div>

Hoffe, dass es

Answer 2

zusätzliche CSS erstellen hilft Regeln für h3, h4 und btn-block, in denen Sie s definieren Einstellungen für margin-top und margin-bottom. Beginnen Sie mit dem Wert 0 für alle und erhöhen Sie die Werte, bis Sie mit dem Ergebnis zufrieden sind.

ADDITION nach Kommentaren:

1.) Sie haben einen leeren p Tag zwischen dem Bild und dem h3 2.) Sie haben eine CSS-Regel für alle p Tags mit einem unteren Rande von 20px (on line 278 von "style.css")