Как убрать разрыв между div в html?

Question

Я застрял с этой проблемой и не могу выйти из этого.Пожалуйста, помогите мне.

На моей веб-странице я использовал 3 элемента div внутри контейнера div. Я пытаюсь удалить нежелательный пробел между элементом div.

• (1) Изображение верхнего уровня
• (2) Изображение среднего уровня
• (3) Изображение нижнего уровня

Я пытаюсь настроить эти 3div, чтобы он выглядел как одно изображение bg.Моя средняя часть и нижняя часть полностью отрегулированы, но между верхней частью и средней частью есть промежуток между тем, что я пытаюсь удалить, но не могу.

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

Заранее спасибо.

#main_container {
    background-repeat:no-repeat;
    width:645px;
    float:left;
    padding-bottom:10px;
    overflow:hidden;
    height:auto;
}
#middle_part {
    background-image: url('/DiscoverCenter/images/apps_mid.png');
    background-repeat:repeat-y;
    width:645px;
    padding-bottom:10px;
    overflow:hidden;
    height:auto;
    clear:both;
    position:relative;
    display: block;
    vertical-align: bottom;
}
#top_part {
    background-image:url('/DiscoverCenter/images/apps_top.png');
    width:645px;
    top:0px;
    height:47px;  /* actual height of the top bg image */
    clear:both;
    position:relative;
    display: block;
    vertical-align: bottom;
}
#bottom_part {
    background-image:url('/DiscoverCenter/images/apps_btm.png');
    width:645px;
    height:24px; /* actual height of the bottom bg image */
}

Answer 1

Рассматривали ли вы возможность сброса?

* {
    padding: 0px;
    margin: 0px
}

Добавьте это к началу

Однако, пока мы находимся на предмете: используете ли вы изображения для получения закругленных углов? Вы можете использовать CSS, чтобы получить закругленные углы в наше время!

Вот сайт, который может помочь с этими:

http://www.css3.info/preview/rounded-border/

Answer 2

Некоторые корректировки исправят это:

#main_container, #top_part, #middle_part, #bottom_part { margin:0; padding:0; width:645px; }
#main_container {
    float:left; 
    } /* setting height:auto and overflow:hidden won't do anything */

#top_part {
    background:url('/DiscoverCenter/images/apps_top.png') no-repeat;
    clear:both;
    height:47px;
    }
#middle_part {
    background:url('/DiscoverCenter/images/apps_mid.png') repeat-y;
    display: block; /* only needed if you're assigning this id to an inline element */
    min-height: ?? /* assure this element can expand, but never collapses completely */
    vertical-align: bottom;
    }
#bottom_part {
    background:url('/DiscoverCenter/images/apps_btm.png');
    height:24px;
    }

top_part, middle_part, bottom_part могут иметь поля или отступы, если это не «сторона», которая касается другого (то есть: нижняя часть #top иtop of #middle нужно трогать, а не двигать)

Начните здесь, и посмотрите, какие корректировки презентации необходимо внести.Я убрал позиционирование сверху, снизу и сверху, потому что это не имеет отношения к желаемому эффекту.Возможно, вам понадобится добавить их для абсолютно точного позиционирования предметов внутри них, но это другой пост.

Answer 3

Я столкнулся с той же проблемой, единственный способ исправить это - использовать InspectElement в браузере и продолжать изменять поле до некоторого значения -ve.

Answer 4

Сброс маржи идеально подходит для меня в таких случаях

Answer 5

Это сработало, когда у меня было три (верхний, средний, нижний) фоны, и у каждого был тег div

margin:-8px;

Answer 6

Мне удалось решить проблему самостоятельно

margin:-16px

Answer 7

Это была проблема с размером изображения Top bg.Размер изображения составляет 45 пикселей, и я принял размер div как 47 пикселей.Уменьшение размера div решило мою проблему. Большое спасибо Dawson и DBz за помощь.

Answer 8

Возможно, вы захотите установить отступ в 0, а не в 10px, и явно указать высоту div вместо использования auto.

Или, альтернативно, создайте div-оболочку, которая вмещает все фоновое изображение, чтобы вам не приходилось беспокоиться о том, что они не будут выравниваться в некоторых браузерах ...