Title: Adding gaps between thumbnails with CSS Last modified: August 22, 2016 --- # Adding gaps between thumbnails with CSS * [norrie](https://wordpress.org/support/users/norrie/) * (@norrie) * [11 years, 5 months ago](https://wordpress.org/support/topic/adding-gaps-between-thumbnails-with-css/) * Hi. I’ve been asked to add a few pixels between each project thumbnail to create some separation but can’t figure out which CSS item I need to add a margin to. The inspector in safari says the class of overlay but I’m not sure that’s correct. Would appreciate it if someone could set me straight. Thanks! [](http://adinnovations.com.au) Viewing 10 replies - 1 through 10 (of 10 total) * Thread Starter [norrie](https://wordpress.org/support/users/norrie/) * (@norrie) * [11 years, 5 months ago](https://wordpress.org/support/topic/adding-gaps-between-thumbnails-with-css/#post-5584708) * [This is the site](http://adinnovations.com.au) * Moderator [Jose Castaneda](https://wordpress.org/support/users/jcastaneda/) * (@jcastaneda) * THEME COFFEE MONKEY * [11 years, 5 months ago](https://wordpress.org/support/topic/adding-gaps-between-thumbnails-with-css/#post-5584720) * I’m going to take a shot in the dark on this one but I’m guessing it will be a JS value that you may have to change. What makes me think that is the use of isotope. * _Grabs piece of pineapple to eat_ * It could be possible to change the CSS you would just have to target the right one. From the quick glance I took you can try `.project.small` classes combined but it may mess with the images a little. * Thread Starter [norrie](https://wordpress.org/support/users/norrie/) * (@norrie) * [11 years, 5 months ago](https://wordpress.org/support/topic/adding-gaps-between-thumbnails-with-css/#post-5584722) * Thanks Jose. * [Ramesh (thecodeisclear)](https://wordpress.org/support/users/thecodeisclear/) * (@thecodeisclear) * [11 years, 5 months ago](https://wordpress.org/support/topic/adding-gaps-between-thumbnails-with-css/#post-5584727) * Here is part of the code for one of the images * ```
Retrac Louvres™ ROOFS ``` * All other images seem to be following the same format. Here are the changes I would do in styles.css * ``` #content .project.small img{ width: 100%; height: auto; margin: 5px; } ``` * and * ``` #content .project.small .overlay { position: absolute; display: none; background: #cdb980; width: 100%; height: 100%; z-index: 9; margin: 5px; } ``` * Thread Starter [norrie](https://wordpress.org/support/users/norrie/) * (@norrie) * [11 years, 5 months ago](https://wordpress.org/support/topic/adding-gaps-between-thumbnails-with-css/#post-5584740) * Thank you!! I’ll give that a go. * Thread Starter [norrie](https://wordpress.org/support/users/norrie/) * (@norrie) * [11 years, 5 months ago](https://wordpress.org/support/topic/adding-gaps-between-thumbnails-with-css/#post-5584754) * Didn’t work unfortunately. * [Ramesh (thecodeisclear)](https://wordpress.org/support/users/thecodeisclear/) * (@thecodeisclear) * [11 years, 5 months ago](https://wordpress.org/support/topic/adding-gaps-between-thumbnails-with-css/#post-5584778) * That’s strange, I made the code changes via FF inspector and here is the output [http://www.tiikoni.com/tis/view/?id=4036ee1](http://www.tiikoni.com/tis/view/?id=4036ee1) * style sheet [http://www.tiikoni.com/tis/view/?id=9a53aad](http://www.tiikoni.com/tis/view/?id=9a53aad) * Thread Starter [norrie](https://wordpress.org/support/users/norrie/) * (@norrie) * [11 years, 5 months ago](https://wordpress.org/support/topic/adding-gaps-between-thumbnails-with-css/#post-5584784) * Yeah, right. I’ll look at it again. Thanks again! * Thread Starter [norrie](https://wordpress.org/support/users/norrie/) * (@norrie) * [11 years, 5 months ago](https://wordpress.org/support/topic/adding-gaps-between-thumbnails-with-css/#post-5585040) * Really appreciate the tips I’ve been given so far. This is kinda working but how can I make the width or the bottom borders the same as the sides? Also the last thumbnail isn’t the same as the others now that the border has been added. I’ve been fiddling but can’t figure it out. Here’s the code. Thanks again. * ``` #projects { margin: 0 0 0 0; width: 100%; padding: 0; float: left; display: block; position: relative; } #projects .thumbs { margin: 0 auto; } #content #projects li{ padding: 0; background: none; } #content .project.small { display: block; position: relative; float: left; margin: 0 !important; max-width: 300px; height: auto; padding-bottom: 0; cursor: pointer; background: #fff; zoom: 1; visibility: hidden; } #content .project.small img{ width: 100%; height: auto; border: 6px solid #e2e2e2; } #content .project.small .description { position: absolute; display: none; top: 0; color: #fff; padding: 20px 20px !important; z-index: 10; } #content .project.small .overlay { position: absolute; display: none; background: #cdb980; width: 100%; height: 100%; z-index: 9; border: 6px solid #e2e2e2; } #content .project.small .title { display: inline-block; margin: 0 12px 0 0; padding-bottom: 12px; font-weight: bold; font-size: 1em; color: #fff; } ``` * Thread Starter [norrie](https://wordpress.org/support/users/norrie/) * (@norrie) * [11 years, 5 months ago](https://wordpress.org/support/topic/adding-gaps-between-thumbnails-with-css/#post-5585041) * Also the rollovers are too big now. Viewing 10 replies - 1 through 10 (of 10 total) The topic ‘Adding gaps between thumbnails with CSS’ is closed to new replies. ## Tags * [margin](https://wordpress.org/support/topic-tag/margin/) * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/) * 10 replies * 3 participants * Last reply from: [norrie](https://wordpress.org/support/users/norrie/) * Last activity: [11 years, 5 months ago](https://wordpress.org/support/topic/adding-gaps-between-thumbnails-with-css/#post-5585041) * Status: not resolved ## Topics ### Topics with no replies ### Non-support topics ### Resolved topics ### Unresolved topics ### All topics