Как убрать пробел между div в html?

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

введите здесь описание изображения

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

  • (1)Верхнее фоновое изображение
  • (2) Среднее фоновое изображение
  • (3) Нижнее изображение BG

Я пытаюсь настроить эти 3 div так, чтобы они выглядели как одно изображение 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 */
}

html gaps-in-visuals
person Gendaful    schedule 28.02.2011    source источник
comment
@user515990 user515990 Какая у вас разметка HTML?   -  person tiago2014    schedule 28.02.2011
comment
Я имею в виду HTML-код, т.е. DIV с этими идентификаторами.   -  person tiago2014    schedule 28.02.2011

Ответы (8)


arrow_upward
11
arrow_downward

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

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

Добавь это в топ

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

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

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

person Dbz    schedule 28.02.2011
comment
@dbz: закругленный угол не является моим явным требованием, мне нужно использовать 3 изображения, чтобы заполнить необходимый контент, и я не могу их правильно настроить :( - person Gendaful; 28.02.2011
comment
@ user515990, можете ли вы опубликовать копию своего кода на jsfiddle.net? - person Dbz; 28.02.2011
comment
Можете ли вы разместить фотографии, которые вы используете в Интернете? - person Dbz; 28.02.2011
comment
@Dbz: пожалуйста, обратитесь к picasaweb.google.com/hemish.kapadia/Feb282011. ?feat=прямая ссылка# - person Gendaful; 28.02.2011
comment
У вас все еще есть та же проблема? Если да, можете ли вы опубликовать jsfiddle с рабочими изображениями? - person Dbz; 28.02.2011
comment
@Dbz: я добавил контейнер разбивки на страницы, поэтому я думаю, что это связано с этим. Я пытаюсь его отладить, Lets c .. большое спасибо за вашу помощь. - person Gendaful; 28.02.2011
comment
Хорошо @ user515990, но если это не решит проблему, попробуйте связать работающий jsfiddle, чтобы я мог его отладить = p - person Dbz; 28.02.2011

arrow_upward
1
arrow_downward

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

#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 и верхняя часть #middle должны касаться, а не двигаться)

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

person Dawson    schedule 28.02.2011
comment
@Dawson: Спасибо за все усилия. Если я использую background-image:url('/DiscoverCenter/images/apps_btm.png') no-repeat; тогда мои изображения не появляются. Что здесь не так, пожалуйста, помогите - person Gendaful; 28.02.2011
comment
Прости. Попробуйте удалить «не повторять». Редактирование сообщения, чтобы соответствовать. - person Dawson; 28.02.2011
comment
@Dawson: я проверил элемент в firebug, и на самом деле проблема в том, что между верхом и серединой есть зазор, поэтому я вижу bg-изображение контейнера div. Я не думаю, что верх повторяется. - person Gendaful; 28.02.2011
comment
Две вещи... 1. закомментируйте весь свой код выше #main_container и посмотрите, сохраняется ли проблема. Если да, то это CSS внутри. 2. Разместите ссылку на страницу или разместите HTML-код, чтобы все могли видеть, что вы делаете. Похоже, вы все еще что-то дополняете или на #top или #middle установлено поле. Трудно сказать без всего вашего кода или, по крайней мере, той части, которая вызывает у вас проблемы. - person Dawson; 28.02.2011
comment
@Dawson: я поставил значение поля 0 важным в своем коде, чтобы оно имело приоритет. /a> , я поделился там своим html. Пожалуйста, дайте несколько советов, если вы узнали что-нибудь. Большое спасибо - person Gendaful; 28.02.2011
comment
Пожалуйста, исправьте URL спрайтов CSS. Без них и добавления границ ко всем ‹div› код выглядит правильно... Я все еще предполагаю, что это не так. - person Dawson; 28.02.2011
comment
В опубликованном вами коде jsfiddle много закрывающих тегов абзаца, но нет открывающих тегов. Кроме того, похоже, что первый тег p в каждом блоке ссылок предназначен как открывающий тег <p>; если это так, вы не хотите вкладывать блочные элементы внутрь встроенных элементов <p><div></div></p> = плохо .... это может быть даже корнем вашего разрыва. - person Dawson; 28.02.2011
comment
@Dawson: Спасибо за помощь и время. Я проверил эту точку зрения и не обнаружил проблем с этим. Проблема в чем-то другом. Не знаю, что здесь происходит :( - person Gendaful; 28.02.2011
comment
@user - Согласен, я больше хотел увидеть, что происходит. Я добавил div { border: 1px dotted grey } в css, и все выглядит так, как будто оно выстраивается правильно (в любом случае jsfiddle). Мысль, что наличие искусства внутри div поможет прояснить ситуацию. Если вы не пытались создать ТОЛЬКО этот раздел своей страницы в одиночку, я бы сделал это. - person Dawson; 28.02.2011
comment
@Dawson: В любом случае спасибо, :) . Я близок к решению, как только я его получу, я опубликую его здесь, я думаю, что это связано с pagination div. - person Gendaful; 28.02.2011
comment
@пользователь - очень круто. определенно хотел бы видеть, что исправление было. Удачи. - person Dawson; 28.02.2011

arrow_upward
0
arrow_downward

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

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

person Rob    schedule 28.02.2011
comment
Я заполняю содержимое динамически, поэтому я не могу установить его явно. Я должен установить его в соответствии с размером содержимого. Я уже взял div-оболочку (div-контейнер), который обертывает все 3 div. Спасибо за предложение. - person Gendaful; 28.02.2011

arrow_upward
0
arrow_downward

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

person Gendaful    schedule 28.02.2011

arrow_upward
0
arrow_downward

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

margin:-16px
person Saeed-rz    schedule 29.02.2012
comment
Откуда взялось -16? Я думаю, что таким образом существует некоторая несовместимость между браузерами. - person CoderInNetwork; 01.08.2013

arrow_upward
0
arrow_downward

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

person DotCreatives    schedule 12.07.2013

arrow_upward
0
arrow_downward

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

person Naga    schedule 01.09.2013

arrow_upward
-1
arrow_downward

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

margin:-8px;

person Alex    schedule 20.08.2012
comment
Этот ответ повторяет предыдущий ответ - person Matt Whipple; 27.09.2012