Не могу убрать отступ

ar. · December 17, 2011

Не могу убрать верхний отступ у фоновой картинки в хэдере с помощью margin.

Не могу въехать почему

При установке position: absolute; верхний отступ убирается, но тогда не выравнивается по центру по горизонтали.

Буду очень благодарен за ответы! Прошу не сильно ругаться

Ниже код: -

body {
background-color: #f8ebb8;
margin: 0 auto;
width: 100%;
}
[b]div#header-all {
background: url('../img/header-all.jpg') no-repeat;
background-color: #f8ebb8;
margin: 0 auto;
position: relative;
height: 406px;
width: 1200px;
}

<body>
 <div id="header-all"><!--Хэдер-->
 	<div id="header-1"> <!--Верхние кнопки+Поисковая форма-->

            <p id="action-button"> <!--Верхние кнопки-->
            <a href="#help" title="Live help">Live hel</a>
            <a href="#login" title="Login/Register">Login/Register</a>
            </p>

        <form action="#search" method="post" id="search-form"> <!--Поисковая форма-->
            <p>
            <input type="text" name="query" value="Search" />      
            <input type="submit" name="submit" value="Search!" />
            </p>
        </form> <!--Поисковая форма-->
    </div><!--Верхние кнопки+Поисковая форма-->

    <div id="logo" > <!--Логотип(картинка+надпись)-->
    				<h1><a href="#home" title="Home Page">herbal treats</a></h1>
    </div><!--Логотип(картинка+надпись)-->

 </div><!--Хэдер-->

sammasati · December 17, 2011

Это все из-за полей html и body. Нужно из обнулить:

html, body {
  padding: 0;
  margin: 0;
}

ar. · December 17, 2011

К сожалению не помогло.

sammasati · December 17, 2011

Вот:

p {
  margin: 0;
}

Из-за схлопывания, <p> создавал отступ перед дивом.

Про схлопывание можно почитать здесь: http://htmlbook.ru/samlayout/blochnaya-verstka/skhlopyvayushchiesya-otstupy

И советвую поставить firebug. В нем можно отследить такие косяки.

Edited December 17, 2011 by sammasati

ar. · December 18, 2011

Всё верно, спасибо большое.

beebeekei · October 7, 2012

Скажите, пожалуйста, почему в моём примере в строке "Back To Listing" есть отступ слева? Никак не могу его убрать((

DownHouse · October 8, 2012

Потому что float: left; у .about_header_text

mrnobody · October 9, 2012

Добавьте к #backtolisting {

clear: left;

}

или уменьшите нижний и/или верхние отступы (padding)

Попробую объяснить. Сам блок #backtolisting остается на месте, а вот строчные элементы: инлайн-боксы и в нашем случае анонимные инлайн-боксы (боксы, которые находятся внутри блочных элементов, и они не обернуты в инлайн-элементы — это em, span, b, i, strong и тд.) обтекают элемент .about_header_text.

http://jsfiddle.net/P3UZk/5/

Edited October 9, 2012 by mrnobody

beebeekei · October 10, 2012

DownHouse, mrnobody - ребята, спасибо за отклики...попробую с "clear: left" всё сделать!

Sign In

Не могу убрать отступ

Question

ar.

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

sammasati

Link to comment

Share on other sites

ar.

Link to comment

Share on other sites

sammasati

Link to comment

Share on other sites

ar.

Link to comment

Share on other sites

beebeekei

Link to comment

Share on other sites

DownHouse

Link to comment

Share on other sites

mrnobody

Link to comment

Share on other sites

beebeekei

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information