justified all images in div without any space - html

Question

How to justify all images inside a div so that there is no any space left in the left-side and the right-side of the div.
Here is my HTML:
<ul class="thumnails">
<li class="img-thum">
<img src="broward.jpg"/>
<p class="thum-capt">How a Squad of Ex-Cops Fights Police Abuses</p>
</li>
<li class="img-thum">
<img src="honey.jpg"/>
<p class="thum-capt">The Men's Rights Movement and the Women Who Love It</p>
</li>
<li class="img-thum">
<img src="bottles.jpg"/>
<p class="thum-capt">Bottled Water Comes From the Most Drought-Ridden Places in the Country</p>
</li>
<li class="img-thum">
<img src="snyder.jpg"/>
<p class="thum-capt">6 Dumb Things Dan Snyder Has Said About the Name of His Football Team</p>
</li>
</ul>
And here my CSS
If I am setting the padding-right with value, then there will be a space in the right-side.
.thumnails {
width: 100%;
display: block;
float: left;
overflow: hidden;
padding: 0;
margin: 12px auto;
position: relative;
list-style: none;
}
.thumnails .img-thum {
width: 23%;
display: inline-block;
padding: 0;
padding-right: 1.5%;
margin: 0 auto;
}
.thumnails .img-thum img {
width: 100%;
padding: 0;
margin: 0;
}
.thumnails .img-thum .thum-capt {
width: 100%;
float: left;
overflow: hidden;
display: block;
position: relative;
padding: 0;
margin: 0;
font-weight: bold;
font-size: 14px;
font-family: serif;
}
My Fiddle

Answer 1

Try to read this article by Chris Coyer:
http://css-tricks.com/equidistant-objects-with-css/
Your css should be like this:
.thumnails {
width: 100%;
display: block;
float: left;
overflow: hidden;
padding: 0;
margin: 12px auto;
position: relative;
list-style: none;
text-align: justify; /* <== add this */
}
.thumnails .img-thum {
width: 23%;
display: inline-block;
padding: 0;
margin: 0 auto;
}
.thumnails .img-thum img {
display: inline-block; /* <== and this */
width: 100%;
padding: 0;
margin: 0;
}
.thumnails .img-thum .thum-capt {
width: 100%;
float: left;
overflow: hidden;
display: block;
position: relative;
padding: 0;
margin: 0;
font-weight: bold;
font-size: 14px;
font-family: serif;
}
/*and this*/
.thumnails:after {
content: '';
width: 100%; /* Ensures there are at least 2 lines of text, so justification works */
display: inline-block;
}
please see this demo

Answer 2

To ensure proper sizing it's nearly always worth using box-sizing:border-box so that padding and borders are included in width calculations.
Then the are two simple methods (based on your current code) although there are other options available.
JSfiddle (Inline-block)
Jsfiddle (Floats)
CSS re Inline Block
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.thumnails {
width: 100%;
display: block;
float: left;
overflow: hidden;
padding: 0;
margin: 12px auto;
position: relative;
list-style: none;
background:black;
font-size:0; /* required to remove white space */
}
.thumnails .img-thum {
width: 25%;
display: inline-block; /* change to float:left for float version */
padding: 0;
margin: 0 auto;
}
.thumnails .img-thum img {
width: 100%;
padding: 0;
margin: 0;
}
.thumnails .img-thum .thum-capt {
width: 100%;
float: left;
overflow: hidden;
display: block;
position: relative;
padding: 0;
margin: 0;
font-weight: bold;
font-size: 14px;
font-family: serif;
}

Answer 3

try like this: Demo
Just update this css to solve this problem.
CSS:
.thumnails .img-thum {
width: 23%;
display: inline-block;
padding: 0;
margin: 0;
float:left;
}
Updated fiddle Link
Space between images: Link. Hope you need like this

Answer 4

Solved Your Problem >> Images Without Space and justified in middle
Test in Full Screen >> FullScreen Fiddle
Modified css
.thumnails {
width: 100%;
display: block;
float: left;
overflow: hidden;
padding: 0;
margin:1%;
position: relative;
list-style: none;
white-space:no-wrap;
}
.thumnails .img-thum {
width: 22.5%;
display: inline-block;
padding: 1%;
margin: 0 auto;
}
.thumnails .img-thum img {
width: 100%;
padding: 0;
margin: 0;
}
.thumnails .img-thum .thum-capt {
width: 100%;
float: left;
overflow: hidden;
display: block;
position: relative;
padding: 0;
margin: 0;
font-weight: bold;
font-size: 14px;
font-family: serif;
}