@AlelxSSS

Почему высота div-а на несколько пикселей больше, чем внутренний img, хотя padding и margin везде равен нулю?

<section id="Shows">
		<div class="views-row">		
			<img src="http://www.eminem.com/sites/g/files/g20001906/f/styles/scale_w1280/public/201503/em-video.png?itok=2KVpaGra" alt="">
			
			<div class="video-heading">
				<div class="video-title">
				NOT AFRAID: THE SHADY RECORDS STORY
				</div>
			</div>
		</div>
		
		<div class="views-row">		
			<img src="http://www.eminem.com/sites/g/files/g20001906/f/styles/scale_w1280/public/201503/em-video.png?itok=2KVpaGra" alt="">
			
			<div class="video-heading">
				<div class="video-title">
				NOT AFRAID: THE SHADY RECORDS STORY
				</div>
			</div>
		</div>
		
	</section>


.views-row {
	width: 100%;
	padding: 0;
	margin: 0;
    margin: 0;
    position: relative;
    overflow-y: hidden;
	padding: 0;
	-webkit-filter:grayscale(100%);
	-moz-filter: grayscale(100%);
	filter: grayscale(100%);
	transition: 0.5s;
}

.views-row:after {
	content: '';
    background: url(http://www.eminem.com/sites/deveminem.umg.edrupalgardens.com/files/201310/img-pattern2.png);
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0.4;
}

.views-row:hover:after {
    background: url();
}

.views-row img{
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width:100%;
    height: auto;
    margin: 0;
    position: relative;
	z-index: 0;
	padding: 0;
	margin: 0;
}

.views-row:hover{
	-webkit-filter:grayscale(0%);
	-moz-filter: grayscale(0%);
	filter: grayscale(0%);

}


.video-heading {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 90px;
	background-color: rgba(0,0,0,0.7);
	padding: 25px 20px 15px 20px;
	z-index: 2;
	color: #fff;
	font-family: 'Ravi Prakash', cursive;
	vertical-align: middle;
	font-size: 30px;
	
	box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;
}

.video-title {
	float:left;
	color: #FD1212;
}


Ссылка на демонстрацию проблемы:
joxi.ru/VrwbYWofOVZGBA

Уже часа три туплю над этим. Даже написал скрипт, который режет на 4 пикселя див, но изредка возникает глюк (сжимает нафиг див до 10 пикселей) - так что хотел бы разрешить вопрос "мирными" способами.

Заранее Спасибо за ответы, Ребят! =]

P.S. А вот код JS, кому интересно:
jQuery(function ($) {
	
    function fix_size() {
        var containers = $('.views-row');
        containers.each(setsize);

        function setsize() {
            var con = $(this);
			var h = con.height()-3;
			con.height(h);
        }
    }
    $(window).on('resize', fix_size);
    fix_size();
});
  • Вопрос задан
  • 524 просмотра
Решения вопроса 1
delphinpro
@delphinpro Куратор тега CSS
frontend developer
Потому что img по умолчанию - inline элемент. Т.е. грубо говоря, строка. а у строк есть межстрочное расстояние.
напишите этой картинке стиль display:block и отступ пропадет.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
03 июл. 2022, в 11:11
250 руб./за проект
03 июл. 2022, в 10:56
500 руб./за проект
03 июл. 2022, в 10:37
4000 руб./за проект