What I need is to align text vertically. I add display:table to images, but that makes images 1px shorter. In order to show what I mean I added display:table to the hover state so you can see what happens. Why is that happens?
.wrapper {
margin: 0 auto;
max-width: 940px;
background: #EBEBEB;
}
.border {
border-radius: 4px;
}
.ideas__gallery div {
margin: 10px;
}
.ideas__gallery__h4 {
text-decoration: none;
font-weight: bold;
color: #fff;
font-size: 22px;
line-height: 1.2em;
padding: 0;
margin: 0;
}
.one:hover .ideas__gallery__h4 {
color: #ff5b5d;
transition: all 0.2s ease-in;
}
.one:hover,
.two:hover,
.three:hover,
.four:hover,
.five:hover,
.six:hover {
display: table;
}
.ideas__gallery__h3 {
color: #333;
font-weight: bold;
font-size: 22px;
text-align: center;
margin-bottom: 34px;
}
.one {
width: calc(33.3333333333333333% - 20px);
height: 310px;
background: url('http://carwallstar.com/wp-content/uploads/2014/11/ford-car-images2015-ford-mustang--2015-ford-mustang-29-----froggpondcom-w8lqchv6.jpg') 100% 100% no-repeat;
background-size: cover;
float: left;
text-align: center;
}
.two {
width: calc(33.3333333333333333% - 20px);
height: 310px;
background: url('http://www.jdpower.com/sites/default/files/legacy_files/pictures/j/jdpower/0981/d6be82ef8f0dfc684d7aed8755d13dcbx.jpg') 50% 100% no-repeat;
background-size: cover;
float: left;
text-align: center;
}
.three {
width: calc(33.3333333333333333% - 20px);
height: 310px;
background: url('http://cdn.corlate.co/2015/08/04/fordmustangsportscar-l-64469263d3a6c918.jpg') 50% 100% no-repeat;
background-size: cover;
float: left;
text-align: center;
}
.four {
width: calc(33.3333333333333333% - 20px);
height: 310px;
background: url('http://7-themes.com/data_images/out/75/7029170-ford-cars-wallpaper.jpg') 50% 100% no-repeat;
background-size: cover;
float: left;
text-align: center;
}
.five {
width: calc(66.6666666666666667% - 20px);
height: 310px;
background: url('http://img.otodriving.com/files/2015/10/Ford-www.otodriving.com-HD-33.jpg') 50% 100% no-repeat;
background-size: cover;
float: left;
text-align: center;
}
.six {
width: calc(66.6666666666666667% - 20px);
height: 310px;
background: url('http://resources.carsguide.com.au/styles/cg_hero_large/s3/ford-mustang-2015-v8-gt-(2).jpg') 50% 100% no-repeat;
background-size: cover;
float: left;
text-align: center;
}
.seven {
width: calc(33.3333333333333333% - 20px);
height: 310px;
background: url('http://carsformula.com/wp-content/uploads/2014/10/2015-Ford-Mustang-50-Year-Limited-Edition-Specs.jpg') 80% 100% no-repeat;
background-size: cover;
float: left;
text-align: center;
}<div class="wrapper">
<div class="ideas__gallery">
<h3 class="ideas__gallery__h3">Headline</h3>
<a href="#">
<div class="one border">
<h4 class="ideas__gallery__h4">Headline Three Words</h4>
</div>
</a>
<div class="two border"><a href="#" class="ideas__gallery__a">Headline Three Words</a>
</div>
<div class="three border"><a href="#" class="ideas__gallery__a">Headline Four Nice Words</a>
</div>
<div class="four border"><a href="#" class="ideas__gallery__a">One</a>
</div>
<div class="five border"><a href="#" class="ideas__gallery__a">Headline Three Words</a>
</div>
<div class="six border"><a href="#" class="ideas__gallery__a">One</a>
</div>
<div class="seven border"><a href="#" class="ideas__gallery__a">One</a>
</div>
</div>
</div>Your 1 pixel is coming from rounding.
If you load the developer console in Chrome, and check the width, setting display: table causes the width to round down to a whole number. Since it is up to the user agent to handle fractions of a pixel, even though the behavior is inconsistent, it is still valid.
Look at the following code and check out the dimension via the developer console. The display: table is clearly dropping the fractional pixels.
.wrapper {
margin: 0 auto;
max-width: 940px;
background: #EBEBEB;
}
.border {
border-radius: 4px;
}
.ideas__gallery div {
margin: 10px;
}
.ideas__gallery__h4 {
text-decoration: none;
font-weight: bold;
color: #fff;
font-size: 22px;
line-height: 1.2em;
padding: 0;
margin: 0;
}
.one:hover .ideas__gallery__h4 {
color: #ff5b5d;
transition: all 0.2s ease-in;
}
.table {
display: table;
}
.ideas__gallery__h3 {
color: #333;
font-weight: bold;
font-size: 22px;
text-align: center;
margin-bottom: 34px;
}
.one {
width: calc(33.3333333333333333% - 20px);
height: 310px;
background: url('http://carwallstar.com/wp-content/uploads/2014/11/ford-car-images2015-ford-mustang--2015-ford-mustang-29-----froggpondcom-w8lqchv6.jpg') 100% 100% no-repeat;
background-size: cover;
float: left;
text-align: center;
}<div class="wrapper">
<div class="ideas__gallery">
<h3 class="ideas__gallery__h3">Discover holiday activity ideas</h3>
<a href="#">
<div class="one border">
<h4 class="ideas__gallery__h4">Headline Three Words</h4>
</div>
<div class="one border table">
<h4 class="ideas__gallery__h4">Headline Three Words</h4>
</div>
</a>
</div>
</div>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments