>
Категории вопросов
Задать вопрос +

Основное

Контент-модули

Продвижение сайта

Управление сайтом

Доп. модули

Вебмастеру

Похожие вопросы



Откуда взялся отступ?

Голоса: +1

Вопрос ламерский, но тем не менее.

В теге <a> возникает непонятный отступ равный 8px, хотя по логике вещей его там быть не должно. Высота блока должна складываться из высоты h2 и img, которые стоят внутри <a>. Тогда откуда этот отступ:

Код страницы со стилями:

<html>

<head>
<title>Lorem ipsum dolor sit amet</title>
<link type="text/css" rel="StyleSheet" href="/_st/my.css" />
<meta content="text/html; charset=UTF-8" http-equiv="content-type" />

<style>
@font-face {font-family:Cuprum;src:url(/fonts/Cuprum-Regular.ttf)}
#prv_h2, #prv_h2_1 {font-family:Cuprum}
html {background:#000000}
body {width:100%;font-size:11pt;font-family:Calibri;color:#ffffff;padding:0;margin:0 auto}
header, nav, main, article, aside, footer, canvas {display:block}
h1, h2, h3, h4, div, p, a, img {outline:0;margin:0;padding:0;border:0;font-weight:normal}
a {color:#ffffff;text-decoration:none}
a:hover {color:#ff0000}
#prv {width:484px;background:#000000;float:left;border:2px solid #ffffff;border-radius:28px 28px}
#prv_h2 {padding:10px;font-size:18px}
#prv_l {display:block;color:#ffffff;border:2px solid #000000;border-radius:28px}
#prv_l:hover {background:#ffffff;color:#000000;border:2px solid #ffffff}
#prv_img {width:480px;height:269px;border-radius:28px}
#prv_m {padding:10px;border-radius:0 0 28px 28px}
</style>
</head>

<body>
<main>
<article id="prv">
<a id="prv_l" href="/tests" target="_self">
<h2 id="prv_h2">Lorem ipsum dolor sit amet</h2>
<img id="prv_img" alt="Теги" src="https://scstylecaster.files.wordpress.com/2015/05/1430812804021.jpeg" />
</a>
<p id="prv_m">Lorem ipsum dolor sit amet, graeco tritani ad mea, an vel putant vocibus volutpat, ius ad tantas volumus. Omnes delicatissimi et sit, ius ad perfecto periculis gubergren. Iusto oratio vix ei, his falli indoctum philosophia at. Eu novum suscipit legendos mel, quo soluta epicuri laboramus ut. In vel veniam antiopam, fierent postulant euripidis per eu. Mel at doming tincidunt.</p>
</article>
</main>

</body>
</html>

Ссылка на тестовую страницу: http://masseffect-universe.com/index/0-46

Адрес сайта http://masseffect-universe.com/index/0-46
| Автор: | Категория: Дизайн сайта
Изменение категории | | Автор: Yuri_Geruk

Ответов: 3

голоса: +2
 
Лучший ответ
Нужно добавить к этому классу высоту, пример ниже...

#prv_l {
border: 2px solid #000000;
border-radius: 28px;
color: #FFFFFF;
display: block;
height: 309px;
}
| Автор:
Выбор ответа лучшим | | Автор: Yuri_Geruk
голоса: +2

Давайте посмотрим код:

<img id="prv_img" alt="Теги" - отвечает за  изображение, с классом prv_img

Теперь переходим к стилям, прописанные у Вас между head и /head

#prv_img {width:480px;height:269px;border-radius:28px}

Теперь меняйте значения border-radius:28px на свое и должно все получиться.

| Автор:

Если честно, я не понял как border-radius может повлиять на расстояние между картинкой и нижней границей блока, в которой она находится. Без сглаживания углов все равно остается расстояние в 8 px:

margin и padding нигде не прописаны.
| Автор:
Голоса: +1

Причина вот в этих стилях:

#prv_l:hover {
    background: #ffffff;
    color: #000000;
    border: 2px solid #ffffff;
}

а именно в багроунде и бордере. Данные стили вообще можно удалить и ваша проблема исчезнет.

| Автор:
...