CODEWITHSUNDEEP
htmlcssimage
bchards
bchards

Reputation: 401

How do I get rid of the gaps between these rows?

I am working on an exercise where I create a grid of photos 4x3. I have removed the gap between photos within rows by removing the spacing in the HTML but the gaps between rows I can not seem to remove. Any help?

https://codepen.io/benrichi/pen/MJgOze?editors=1100

HTML 

<section id="section_photography">
    <h1>Photography</h1>
    <img src="https://placehold.it/350x150" alt="" class="photography_image"><img src="https://placehold.it/350x150" alt="" class="photography_image"><img src="https://placehold.it/350x150" alt="" class="photography_image"><img src="https://placehold.it/350x150" alt="" class="photography_image"><img src="https://placehold.it/350x150" alt="" class="photography_image"><img src="https://placehold.it/350x150" alt="" class="photography_image"><img src="https://placehold.it/350x150" alt="" class="photography_image"><img src="https://placehold.it/350x150" alt="" class="photography_image"><img src="https://placehold.it/350x150" alt="" class="photography_image"><img src="https://placehold.it/350x150" alt="" class="photography_image"><img src="https://placehold.it/350x150" alt="" class="photography_image"><img src="https://placehold.it/350x150" alt="" class="photography_image">
</section>

CSS

#section_photography {
    width: 100vw;
    padding-top: 50px;
    background-color: aqua;
    clear: both;
    position: relative;
}

#section_photography h1 {
    text-align: center;
}

.photography_image {
    width: 25vw;
    margin: none;
    padding: none;
}

Upvotes: 0

Views: 40

Answers (1)

H. Jabi
H. Jabi

Reputation: 171

Use vertical align:

.photography_image {
    width: 25vw;
    margin: none;
    padding: none;
    vertical-align: bottom;
}

Explanation: Images are placed on the baseline by inline property (default), so the space below them is the space reserved for font descenders (g,j,p,q and y). vertical-align: bottom get them to sit at the bottom of the line box.

Upvotes: 2

Related Questions