Отступы из ниоткуда

[ShootingStar]

Написал вот такое:

	
    <header class="header">
        <div class="wrap">
            <div class="logoimg"><a href=""></a></div>
            <h1 class="logo"><a href="#">Environmental.com</a></h1>
        </div>
    </header>

.header {
    height: 113px;
    width: 100%;
    background: url("../image/header-bg.png") repeat-x;

}

.wrap {
    position: relative;
    width: 1024px;
    margin: 0 auto;
    height: 100%;
}

.logoimg {
    float: left;
    margin: 32px 0 0 50px;
    width: 48px;
    height: 47px;
    background: url("../image/logo.png") no-repeat;

}

.logo a {
    font: 31px 'Century Gothic', Tahoma, Sans-serif;
    color: #ffffff;
    text-decoration: none;

}

И почему то сразу есть отсуп:

Правил для a или h1 кроме моих не задано. Если мне нужно задать отступ в 33px, то я делаю скрин браузера, меряю сколько он поставил отступ и отнимаю это число от 33. Подскажите пожалуйста как правильно задавать отступы.

[Yazon_Nile]

Учи свойства по умолчанию. У таких элементов, как заголовки (h1, h2 и тд) - по умолчанию верхний и нижний внешний отступы заданы. Обнули их - и будет тебе счастье

h1{
	margin:0;
}

или

.logo вместо h1 в твоем случае.

Edited February 22, 2012 by Yazon_Nile

[Vin]

Лучше сразу использовать готовые сбросы стилей, даже если они изначально избыточны — ничто не мешает потом написать свой reset-фреймворк.

Edited February 22, 2012 by Vin

[sigma77]

  On 2/22/2012 at 8:10 AM, Vin said:

Лучше сразу использовать готовые сбросы стилей, даже если они изначально избыточны — ничто не мешает потом написать свой reset-фреймворк.

Весьма спорное заявление

[Switch74]

  On 2/22/2012 at 8:42 AM, sigma77 said:

  On 2/22/2012 at 8:10 AM, Vin said:

Лучше сразу использовать готовые сбросы стилей, даже если они изначально избыточны — ничто не мешает потом написать свой reset-фреймворк.

Весьма спорное заявление

А мне кажется лучше всего делать полный сброс, и настраивать все элементы с нуля:

1. элементы отображаются во всех браузерах одинаково.

2. элементы выглядят так как тебе это нужно, а не так, как их показывают браузеры.

примеры:

input, textarea, h1..., a, hr(обычно я заменяю на свой аналог с возможностью настроек)....

Edited February 22, 2012 by Switch74

[ShootingStar]

  On 2/22/2012 at 7:46 AM, Yazon_Nile said:

Учи свойства по умолчанию. У таких элементов, как заголовки (h1, h2 и тд) - по умолчанию верхний и нижний внешний отступы заданы. Обнули их - и будет тебе счастье

h1{
	margin:0;
}

или

.logo вместо h1 в твоем случае.

Использую

/* http://meyerweb.com/eric/tools/css/reset/

v2.0 | 20110126

License: none (public domain)

*/

Там прописано

h1{
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

но всеравно отступ был.

Edited February 22, 2012 by ShootingStar

[ablay2009]

Так у вас же там картинка. Она и создает отступ.

А задавать отступы надо "как есть", зачем что-то замерять?

Edited February 22, 2012 by ablay2009

[ShootingStar]

  On 2/22/2012 at 11:41 AM, ablay2009 said:

Так у вас же там картинка. Она и создает отступ.

А задавать отступы надо "как есть", зачем что-то замерять?

Замерять нужно затем, что если я поставлю отступ в 33px как на шаблоне, то он “cплюсуется” с тем что есть и будет 33+11= 44px отступ.

У картинки есть свойство float:left, ну вот без нее:

    <header class="header">
        <div class="wrap">
            <!--<div class="logoimg"><a href=""></a></div>-->
            <h1 class="logo"><a href="#">Environmental.com</a></h1>

            <h2 class="slogan">site slogan here</h2>

            <div class="support">Help Line 24 /7 Support 1800 3246 345</div>
        </div>

    </header>

.header {
    height: 113px;
    width: 100%;
    background: url("../image/header-bg.png") repeat-x;

}

.wrap {
    position: relative;
    width: 1024px;
    margin: 0 auto;
    height: 100%;
}

/*.logoimg {
    float: left;
    margin: 32px 0 0 50px;
    width: 48px;
    height: 47px;
    background: url("../image/logo.png") no-repeat;
}

.logoimg a {
    display: block;
    width: 48px;
    height: 47px;
}*/

.logo a {
    float: left;
    /*margin: 23px 0 0 16px;*/
    font: 31px 'Century Gothic', Tahoma, Sans-serif;
    color: #ffffff;
    text-decoration: none;

}

Не по теме: На этом форуме отключены ЛС?

Edited February 22, 2012 by ShootingStar

[Yazon_Nile]

30 сообщений наберешь - включатся.

Лучше бы ссылку выложил, чем скрины. Там все сразу будет понятно).

Я пока даже не понял о каких 33 пикселях идет речь.. где искать?))

Кстати, а нафига тебе див логоимг? Все стили с него можно же на н1 повесить)

[ShootingStar]

  On 2/22/2012 at 3:20 PM, Yazon_Nile said:

30 сообщений наберешь - включатся.

Лучше бы ссылку выложил, чем скрины. Там все сразу будет понятно).

Я пока даже не понял о каких 33 пикселях идет речь.. где искать?))

Кстати, а нафига тебе див логоимг? Все стили с него можно же на н1 повесить)

ок, 33 пикселя это отступ который задан в макете:

Так и должно быть что оно не впритык к верхней границы?

http://dl.dropbox.com/u/10878241/temp/index.html

[Yazon_Nile]

ООо! Понял похоже, в чем вопрос))

Если нарисовано - значит так и должно быть. Тем более, как ты себе представляешь читабельность прижатого к верхней границе текста??

Ссылку внутри H1 флотать не надо А коль флотнул, то на заголовок overfow:hidden поставь.

Отступы удобно делать примерно, "на глаз", а потом в FireBugе подгонять пиксель в пиксель и получать точные - нужные - значения.

[ShootingStar]

  On 2/22/2012 at 3:49 PM, Yazon_Nile said:

ООо! Понял похоже, в чем вопрос))

Если нарисовано - значит так и должно быть. Тем более, как ты себе представляешь читабельность прижатого к верхней границе текста??

Ссылку внутри H1 флотать не надо А коль флотнул, то на заголовок overfow:hidden поставь.

Отступы удобно делать примерно, "на глаз", а потом в FireBugе подгонять пиксель в пиксель и получать точные - нужные - значения.

Значит я правильно делал, спасибо за помощь.