Не пойму почему создается оступ

Artik20003 · May 14, 2011

Добрый день!

Никак не могу понять, каким образом у меня в верстке создается такой отступ: Сразу под заголовком "Шкафы" идут разделы, знизу идет отступ. dasma.ru/products/skafi/ margin и padding стоит 0, где возможно. Очень прошу помощи! Заранее благодарен.

buddah · May 14, 2011

Обнулите внутренние отступы для заголовка

<h1>Шкафы</h1>

psywalker · May 14, 2011

Добрый день!
Никак не могу понять, каким образом у меня в верстке создается такой отступ: Сразу под заголовком "Шкафы" идут разделы, знизу идет отступ. dasma.ru/products/skafi/ margin и padding стоит 0, где возможно. Очень прошу помощи! Заранее благодарен.

<br /> убери из кода. Почисти код вообще.

Artik20003 · May 14, 2011

H1 наследует *{padding:0; margin:0} так что внутренних отступов у него нет, или я не так вас понял?

<br> не при чем, меня беспокоит расстояние не между заголовком и началом разделов, а неестественная высота блока разделов.

buddah · May 14, 2011

Я не на тот отступ обратил внимание, мискузи.

У вас есть вот такая конструкция:

<h1>Шкафы</h1><br /> 



<ul class="port-menu"> 
<div style="background:url('/images/bg-razdel.png');border:#5e91bc solid 1px;"> 
	<li class ="port-menu-item" id="bx_2037796212_9"> 
		<a href="/products/skafi/section/9/">Абонентская секция</a></li> 
	<li class ="port-menu-item" id="bx_2037796212_6"> 
		<a href="/products/skafi/section/6/">Архивный</a></li> 
	<li class ="port-menu-item" id="bx_2037796212_11"> 
		<a href="/products/skafi/section/11/">Бухгалтерский</a></li> 
	<li class ="port-menu-item" id="bx_2037796212_8"> 
		<a href="/products/skafi/section/8/">Гардеробный</a></li> 
	<li class ="port-menu-item" id="bx_2037796212_10"> 
		<a href="/products/skafi/section/10/">Депозитный</a></li> 
	<li class ="port-menu-item" id="bx_2037796212_12"> 
		<a href="/products/skafi/section/12/">Оружейный</a></li> 
	<li class ="port-menu-item" id="bx_2037796212_7"> 
		<a href="/products/skafi/section/7/">Офисный</a></li> 
	<li class ="port-menu-item" id="bx_2037796212_13"> 
		<a href="/products/skafi/section/13/">Пистолетный</a></li> 
<div style="clear:both;"> 
</div> 
</ul>

А проблема здесь: <div style="clear:both;">

Зачем задавать ему

margin-bottom:-55px

?

UPDATE:

Я написал вот такой код у себя на локалке, никаких отступов нет.

<html>
<head>
<style>
.port-menu {
list-style-type:none;



}
.port-menu-item{
display:block;
float:left;
margin-left:10px;
padding: 4px;
height:20px;
}
.port-menu-item a {
color: #4c4c4c;
}
.port-menu-item-selected{
background-color: #5E91BC;
}
.port-menu-item-selected a{
color: #fff;
}
</style>
<head>
<body>
<ul class="port-menu"> 
<div style="background:url('/images/bg-razdel.png');border:#5e91bc solid 1px;"> 
        <li class ="port-menu-item" id="bx_2037796212_9"> 
                <a href="/products/skafi/section/9/">Абонентская секция</a></li> 
        <li class ="port-menu-item" id="bx_2037796212_6"> 
                <a href="/products/skafi/section/6/">Архивный</a></li>

        <li class ="port-menu-item" id="bx_2037796212_11"> 
                <a href="/products/skafi/section/11/">Бухгалтерский</a>
</li> 
        <li class ="port-menu-item" id="bx_2037796212_8"> 
                <a href="/products/skafi/section/8/">Гардеробный</a></li> 
        <li class ="port-menu-item" id="bx_2037796212_10"> 
                <a href="/products/skafi/section/10/">Депозитный</a></li> 
        <li class ="port-menu-item" id="bx_2037796212_12"> 
                <a href="/products/skafi/section/12/">Оружейный</a>
				</li> 
        <li class ="port-menu-item" id="bx_2037796212_7"> 
                <a href="/products/skafi/section/7/">Офисный</a></li>

        <li class ="port-menu-item" id="bx_2037796212_13"> 
                <a href="/products/skafi/section/13/">Пистолетный</a></li> 
<div style="clear:both; "> 
</div> 
</ul> 
</body>
</html>

Edited May 14, 2011 by buddah

Artik20003 · May 14, 2011

вот только если убрать <div style="clear:both;"> получу следующее:

отступ не пропал, зато фон свернулся в трубочку. На счет фона - все так и должно было произойти ведь браузер не определяет высоту блочных элементов с float'ом если не поставить после них <div style="clear:both;">.

Вопрос отступа остается открытым)

psywalker · May 14, 2011

вот только если убрать <div style="clear:both;"> получу следующее:
отступ не пропал, зато фон свернулся в трубочку. На счет фона - все так и должно было произойти ведь браузер не определяет высоту блочных элементов с float'ом если не поставить после них <div style="clear:both;">.
Вопрос отступа остается открытым)

Дружище, тебе сверху объяснили уже, с каким блоком проблемы и почему.

Artik20003 · May 14, 2011

Насчет этой конструкции после разделов <div style="clear:both;margin-bottom:-55px;"></div>.

Этим костылем я избавлялся от отступа, когда у разделов не было фона. Теперь он не помогает.Сейчас его удалю и отступ станет больше на 55px)

psywalker · May 14, 2011

Удали полностью весь блок и все стили к нему.

Просто вставь этот код и всё:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type='text/css'>
	*{ margin: 0; padding: 0;}
.port-menu-item {
    display: block;
    float: left;
    height: 20px;
    margin-left: 10px;
    padding: 4px;
}


</style>
</head>

<body>
<ul class="port-menu">
<div style="background:url('/images/bg-razdel.png');border:#5e91bc solid 1px;">
	<li id="bx_2037796212_9" class="port-menu-item">
		<a href="/products/skafi/section/9/">Абонентская секция</a></li>
	<li id="bx_2037796212_6" class="port-menu-item">
		<a href="/products/skafi/section/6/">Архивный</a></li>
	<li id="bx_2037796212_11" class="port-menu-item">
		<a href="/products/skafi/section/11/">Бухгалтерский</a></li>
	<li id="bx_2037796212_8" class="port-menu-item">
		<a href="/products/skafi/section/8/">Гардеробный</a></li>
	<li id="bx_2037796212_10" class="port-menu-item">
		<a href="/products/skafi/section/10/">Депозитный</a></li>
	<li id="bx_2037796212_12" class="port-menu-item">
		<a href="/products/skafi/section/12/">Оружейный</a></li>
	<li id="bx_2037796212_7" class="port-menu-item">
		<a href="/products/skafi/section/7/">Офисный</a></li>
	<li id="bx_2037796212_13" class="port-menu-item">
		<a href="/products/skafi/section/13/">Пистолетный</a></li>
<div style="clear:both;">
</div>
</div></ul>
</body>
</html>

Int · May 14, 2011

overflow:hidden может вернуть фон на место. Правда, от отступа не избавит

А внутри <ul> можно писать <div>?

Artik20003 · May 14, 2011

Я, к сожалению, не могу "просто удалить и вставить". Сайт на Битриксе, весь вывод динамический на php, все стили к этой штуке хранятся в разных сss (но ни элементов раздела ни у предков ничего что задавало бы отступ я не заметил). Вот у меня главный вопрос стоит, какой стиль/html конструкцию убрать чтобы все заработало. <Div style="clear:both;margin-bottom:-55px;"> я убрал, но это не помогло. Я понимаю что по идеи конструкция без всего лишнего не будет создавать ничего лишнего, но убрать ВСЕ я к сожалению не могу.

Поэтому и прошу помощи у вас, чтобы мы вместе нашли что же именно создает данный отступ.

overflow:hidden может вернуть фон на место. Правда, от отступа не избавит
А внутри <ul> можно писать <div>?

Семантически это не совсем верно, но синтаксически так писать можно. Но я уже делал что список вообще убирал, делал пункты разделов span'ами. Все равно не помогло(

buddah · May 14, 2011

Возможно другие блоки как-то растягивают своими отступами..

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

Artik20003 · May 14, 2011

Всем большое спасибо, вопрос решил, но в обход (что не доставляет такого удовольствия)

Всю проблему очевидно создавали конструкции вида "clear:both", причем не только в самом меню разделов, но и ниже у элементов ее нужно было убрать.

Убрал список, сделал разделы span'ами. Для межстрочного расстояния использовал line-height; Это позволило избежать использования clear:both для растягивания фона. Но почему возникала такая проблема я так и не понял.

Sign In

Не пойму почему создается оступ

Question

Link to comment

Share on other sites

12 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information