Padding вместо width и height.

[yujin11]

Добрый день. Не могу понять как работает паддинг, когда им задаешь размер изображения.

Есть картинка высотой в 50px. и шириной в 120px. и казалось бы, для того, что бы она корректно отобразилась нужно задать padding:25px 60px, но не тут то было.

Ширина отображается нормально, а вот по высоте картинка отображается не полностью, как бы срезано. После долгих подборок параметров паддинга у меня получилось padding:0 60px 33px 60px; после этого картинка стала отображаться полностью. Объясните пожалуйста в чём тут прикол?

[Mavrun]

http://shublog.ru/html-and-css/zapomnim-na...rgin-i-padding/

[psywalker]

  yujin11 said:

Добрый день. Не могу понять как работает паддинг, когда им задаешь размер изображения.

Есть картинка высотой в 50px. и шириной в 120px. и казалось бы, для того, что бы она корректно отобразилась нужно задать padding:25px 60px, но не тут то было.

Ширина отображается нормально, а вот по высоте картинка отображается не полностью, как бы срезано. После долгих подборок параметров паддинга у меня получилось padding:0 60px 33px 60px; после этого картинка стала отображаться полностью. Объясните пожалуйста в чём тут прикол?

Пока скриншот того, что ты хочешь получить.

[rus]

  yujin11 said:

Объясните пожалуйста в чём тут прикол?

прикол в том, что паддинги используют только для указания внутренних отступов у элемента, а никак не для задания размеров.

[yujin11]

  rus said:

прикол в том, что паддинги используют только для указания внутренних отступов у элемента, а никак не для задания размеров.

Дело в том, что когда я задаю width и height, то картинка вообще не отображается. Как быть?

  psywalker said:

Пока скриншот того, что ты хочешь получить.

Для чего скриншот? Вот фрагмент кода:

<div id="header">

<a href="#" style id="company"></a>

<a href="#" style id="product"></a>

</div>

#company{

background: url(images/company.gif);

padding:0 60px 33px 60px;

}

#company:hover {

background:url(images/company-over.gif);

padding:0 60px 33px 60px;

}

[Temiks]

можно вообще не указывать высоту и ширину картинки, если конечно она остается без изменений ( не надо увеличить, или уменьшить )

для этого можно и нужно использовать width и height

Edited December 23, 2010 by Temiks

[psywalker]

Всё ясно, так бы и говорил. Короче ссылку делаешь блочной, и указываешь ей обычные размеры без всяких паддингов.

[yujin11]

  Mavrun said:

http://shublog.ru/html-and-css/zapomnim-na...rgin-i-padding/

Почитайте внимательно вопрос! Ваша ссылка тут бесполезна.

  Temiks said:

можно вообще не указывать высоту и ширину картинки, если конечно она остается без изменений ( не надо увеличить, или уменьшить )

для этого можно и нужно использовать width и height

Вы думаете я это не пробовал. width и height здесь не кактит, картинка не отображается.

[Great Rash]

Вам говорят же, что для того чтобы задать размер для <a> его надо сделать блочным. Внимательно изучите, что такое block, inline и inline-block и в чем их отличие. Тогда подобных вопросов у вас не возникнет никогда.

[Mavrun]

  yujin11 said:

Дело в том, что когда я задаю width и height, то картинка вообще не отображается. Как быть?

Для чего скриншот? Вот фрагмент кода:

<div id="header">

<a href="#" style id="company"></a>

<a href="#" style id="product"></a>

</div>

#company{

background: url(images/company.gif);

padding:0 60px 33px 60px;

}

#company:hover {

background:url(images/company-over.gif);

padding:0 60px 33px 60px;

}

display: block в помощь.

[yujin11]

  Temiks said:

можно вообще не указывать высоту и ширину картинки, если конечно она остается без изменений ( не надо увеличить, или уменьшить )

для этого можно и нужно использовать width и height

Ясн. Спасиб.

Edited December 23, 2010 by yujin11

[psywalker]

  yujin11 said:

Хорошо, но почему padding:0 60px 33px 60px; ведь высота картинки не 33px, а 50px?

Потому что ты ещё плохо знаешь CSS

[Great Rash]

  Quote

Хорошо, но почему padding:0 60px 33px 60px; ведь высота картинки не 33px, а 50px?

Потому что к значению 33 прибавляется высота текстовой строки (line-height). В сумме получается 50. Уменьшите размер шрифта и картинка снова обрежется.

[yujin11]

Кошмар

Ещё столько нужно учить

Спасибо всем за советы. Уже делаю успехи