Css - invisible margin during horizontal alignment in wordpress - html

Question

I would like to align six spans horizontally. I'm using Wordpress to create the page. This is the code: (you can find the Css in the jsFiddle link at the bottom of the question)
HTML
<span class="sixth">
<a href="">
<div class="viewProf view-first">
<img alt="" src="" />
<div class="maskProf">
<h2>Title</h2>
<p>Role</p>
</div>
</div>
</a>
</span>
<span class="sixth">
<a href="">
<div class="viewProf view-first">
<img alt="" src="" />
<div class="maskProf">
<h2>Title</h2>
<p>Role</p>
</div>
</div>
</a>
</span>
[...]
<span class="sixth">
<a href="">
<div class="viewProf view-first">
<img alt="" src="" />
<div class="maskProf">
<h2>Title</h2>
<p>Role</p>
</div>
</div>
</a>
</span>
CSS
.sixth {
width: 13.6%;
vertical-align: bottom;
}
.viewProf {
width: 140px;
height: 140px;
margin: 5px;
float: left;
border: 3px solid #780b07;
border-radius: 7px;
overflow: hidden;
position: relative;
text-align: center;
box-shadow: 4px 4px 6px #444;
cursor: pointer;
}
.viewProf .maskProf,
.viewProf .contentProf {
width: 140px;
height: 140px;
position: absolute;
overflow: hidden;
top: 0;
left: 0
}
.viewProf img {
display: block;
position: relative
}
.viewProf h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 13px;
padding: 11px;
background: rgba(0, 0, 0, 0.8);
margin: 20px 0 0 0
}
.viewProf p {
font-family: Georgia, serif;
font-style: italic;
font-size: 12px;
position: relative;
color: #fff;
padding: 15px 25px 25px;
text-align: center
}
.viewProf a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
background: #000;
color: #fff;
text-transform: uppercase;
box-shadow: 0 0 1px #000
}
.viewI a.info:hover {
box-shadow: 0 0 5px #000
}
.view-first .maskProf {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
background-color: rgba(219, 127, 8, 0.7);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.view-first h2 {
-webkit-transform: translateY(-100px);
-moz-transform: translateY(-100px);
-o-transform: translateY(-100px);
-ms-transform: translateY(-100px);
transform: translateY(-100px);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view-first p {
-webkit-transform: translateY(100px);
-moz-transform: translateY(100px);
-o-transform: translateY(100px);
-ms-transform: translateY(100px);
transform: translateY(100px);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.view-first:hover img {
-webkit-transform: scale(1.1, 1.1);
-moz-transform: scale(1.1, 1.1);
-o-transform: scale(1.1, 1.1);
-ms-transform: scale(1.1, 1.1);
transform: scale(1.1, 1.1);
}
.view-first a.info {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view-first:hover .maskProf {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
.view-first:hover h2,
.view-first:hover p,
.view-first:hover a.info {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
}
.view-first:hover p {
-webkit-transition-delay: 0.1s;
-moz-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
-ms-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.view-first:hover a.info {
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
-ms-transition-delay: 0.2s;
transition-delay: 0.2s;
}
And this is the result:
How to remove the space at the bottom of the first span?
EDIT
The code in the jsFiddle works but the result in wordpress doesn't. I have tried with different browsers and I got the same problem. What could it be?
http://jsfiddle.net/userK/9zodn23h/

Answer 1

As requested to specify:
Fiddle: http://jsfiddle.net/mptpL5mx/2/
You want to use a clearfix (div that can wrap your floated items and allow them to work properly without breaking outside of itself)
Then you will want to float your items so they line up nicely.
Also clean up your markup (no block level items inside inline items)
HTML:
<div class="holder clearfix">
<span class="sixth">
<div class="viewProf view-first">
<img alt="" src="" />
</div>
</span>
<span class="sixth">
<div class="viewProf view-first">
<img alt="" src="" />
</div>
</span>
<span class="sixth">
<div class="viewProf view-first">
<img alt="" src="" />
</div>
</span>
<span class="sixth">
<div class="viewProf view-first">
<img alt="" src="" />
</div>
</span>
<span class="sixth">
<div class="viewProf view-first">
<img alt="" src="" />
</div>
</span>
<span class="sixth">
<div class="viewProf view-first">
<img alt="" src="" />
</div>
</span>
</div>
CSS:
.clearfix:before,
.clearfix:after {content: ""; display: table;}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;}
.holder{
background-color: #eee;
padding: 10px;
}
.sixth{
height: 50px;
width: 50px;
float: left;
border: 1px solid #000;
background-color: #fff;
margin-right: 5px;
border-radius: 5px;
box-shadow: 3px 3px 3px rgba(0,0,0,0.5);
}