CSS HTML padding

Question

Я пытаюсь использовать CSS и HTML для вставки изображения на веб-страницу.

У меня есть следующее на CSS:

#eDTP {
background-image: url(eDTP.png);
background-repeat: no-repeat;
background-position: center;
padding-top:475px;
}

и в моем HTML-коде:

<div id="maintext"> 
<p> my page </p>
</div>
<div id="eDTP"></div>

Хотя это работает, у меня есть большое белое пространство сверху и снизу изображений, которое мне не нужно. Я попытался настроить значения отступов, но это, похоже, не очень помогает.

Может ли кто-нибудь указать мне правильное направление, чтобы избавиться от этих пробелов?

Answer 1

Я бы удалил верхнюю часть отступа. Это должно устранить проблему. Я не уверен, почему вам нужно такое большое количество отступов между ними.

РЕДАКТИРОВАТЬ - Просто прочитайте, что вы говорите, что заполнение не помогло вам. Есть ли шанс ссылки на URL? Или живой пример где-нибудь, чтобы увидеть проблему более подробно?

Answer 2

Убедитесь, что для line-height фигуры или окружающего элемента установлено значение line-height:1;

Answer 3

Ваша самая большая проблема - ширина и высота.Кроме того, как вы хотите, чтобы это изображение отображалось?Вы хотите это ниже текста, на стороне текста и т. Д.?В современных браузерах div полностью свернут, а его высота равна 0. Его ширина по умолчанию равна 100%.IE7 и старше не работают таким образом для высоты.

Вам необходимо указать не отступы, а ширину и высоту для вашего контейнера div, eDTP, то есть если вы хотите иметь фоновое изображениедобавлено через CSS.Если вы хотите, чтобы изображение заполняло eDTP с помощью тега img, вам не нужно указывать высоту.

Кстати, причина, по которой вы видите изображение с отступами, основана на чем-то, называемом боксоммодель.Заполнение расширяет видимую область цвета фона, фоновое изображение и другие.Заполнение у вас работает так, как если бы у вас была высота, назначенная его контейнеру.Но, как я уже говорил, это очень плохой способ сделать это.Добавьте это к вашей декларации eDTP:

#eDTP {
background: url(eDTP.png) no-repeat center;
width:500px; /* Change this value to the width of your image */
height:475px;/* I assume this is the height of your image */
}

Answer 4

Здесь вы пытаетесь показать изображение в качестве фона для div. Есть ли действительно веская причина не использовать HTML, как указано выше?

<div id="maintext"> 
<p> my page </p>
</div>
<div id="eDTP">
  <img src="eDTP.png">
</div>

Если это так, вам нужно указать размеры вашего di, потому что он не соответствует размеру фона автоматически (я думаю, это не удивительно).

Попробуйте

#eDTP {
background-image: url(eDTP.png);
background-repeat: no-repeat;
background-position: center;
width: 120px; //background image width here
height: 150px; // and height here
}

Answer 5

К сожалению, нет никакого способа сделать это в HTML / CSS.Единственный способ сделать это - вставить значения на вашем сервере или на стороне клиента с помощью javascript.Вы действительно должны сделать это с тегами <img> внутри вашего элемента <div> следующим образом.

Убедитесь, что вы указали правильное расположение изображения, которое хотите показать в папке, в которой оно вызывается.

http://jsfiddle.net/gKFAT/

Answer 6

Вы указали только размер padding. Размер фонового изображения не влияет на размер элемента. Вы должны удалить padding и указать width и height для элемента, чтобы он соответствовал размеру изображения.