CODEWITHSUNDEEP
htmlcssspacing
Domesticated Ape
Domesticated Ape

Reputation: 23

CSS: How to add 10px between images?

I'm attempting to add 10px spacing between images in a gallery on my website. I'm using a Wordpress custom theme with an integrated 'page builder', which is being used to create my portfolio posts with shortcodes (not sure if this is useful info!)

Currently the images are in a grid layout with zero spacing - see image below.

I would like to add a 10px spacing in between each image, but not on the outer sides as the page is full width - see image below of how I would like it to look.

Is anyone able to help me amend the CSS to achieve this? I've been trying for days but it's beyond my very basic CSS ability.

Any help would be super appreciated!

Here's the CSS code in question: 

/*	Gallery
------------------------------------------------*/
.sr-gallery {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 100%;
	overflow: hidden;
}

.sr-gallery.gallery-col3 { width: 100.5%; }
	
.sr-gallery li {
	margin: 0;
	padding: 0;
	float: left;
	width: 33.33%;
	overflow: hidden;
	text-align: center;
}
	
.gallery-col1 li { width: 100%;  }
.gallery-col2 li { width: 50%;  }
.gallery-col3 li { width: 33.33%;  }
.gallery-col4 li { width: 25%;  }
.gallery-col5 li { width: 20%;  }
.gallery-col6 li { width: 16.66%;  }
	
.sr-gallery li a  {
	display: inline-block;
	max-width: 100%;
}
<ul class="sr-gallery gallery-col1">
  <li><img src="http://chatsingh.com/wp-content/uploads/2016/08/Secret7-003-1.jpg" alt=""></li>
</ul>

<ul class="sr-gallery gallery-col2">
  <li style="
    border-right: 5px solid #fff;
"><img src="http://chatsingh.com/wp-content/uploads/2016/11/Secret7-007-1100x800.jpg" alt=""></li>
  <li><img src="http://chatsingh.com/wp-content/uploads/2016/08/Secret7-001-1-1100x800.jpg" alt="" style="
    box-shadow: inset 10px 0 0 0 #fff;
"></li>
</ul>

<ul class="sr-gallery gallery-col1">
  <li><img src="http://chatsingh.com/wp-content/uploads/2016/08/Secret7-004-1.jpg" alt=""></li>
</ul>

Upvotes: 1

Views: 524

Answers (4)

Serg Chernata
Serg Chernata

Reputation: 12400

If we use box-sizing: border-box; then you can just apply borders to specific elements without breaking the layout. 

.sr-gallery li {
    margin: 0;
    padding: 0;
    float: left;
    width: 33.33%;
    overflow: hidden;
    text-align: center;
    border-bottom: 10px solid white;
    box-sizing: border-box;
}

.gallery-col2 li {
    width: 50%;
    border-right: 5px solid white;
}

.gallery-col2 li + li {
    border-left: 5px solid white;
    border-right: none;
}

Upvotes: 0

TheYaXxE
TheYaXxE

Reputation: 4294

In your case (based on you images), you can use Flexbox like this:

body {
  margin: 0;
}

.container {
  display: flex; 
  flex-wrap: wrap;
}

.child {
  display: inline-block;
  background: #3794fe;
  flex: 1 1 auto;
  height: 100px;
  margin-bottom: 10px;
}

.child.col-1,
.child.col-4 {
  width: 100%;
}

.child.col-2 {
  margin-right: 10px;
}

.child:last-child {
  margin-bottom: 0;
}
<div class="container">
  <div class="child col-1"></div>
  <div class="child col-2"></div>
  <div class="child col-3"></div>
  <div class="child col-4"></div>
</div>

Upvotes: 1

john c. j.
john c. j.

Reputation: 1185

I think, you could try this:

.sr-gallery img {
  padding: 10px;
}

Since you don't posted actual working example, I cannot say would or would not it work.

Upvotes: 0

Ray
Ray

Reputation: 686

you could make the entire gallery 10px wider than the screen and have a 5px padding (that is for two images in a row).

Alternatively you might have a padding around the images a have the left images receive a relative position of -5px horizontally and the right images a relative position of +5px horizontally. The tricky part would be to get the padding/offset right so that the separation in the center will also be 10px.

Upvotes: 0

Related Questions