Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 5.00/11: Рейтинг темы: голосов - 11, средняя оценка - 5.00
14 / 14 / 0
Регистрация: 16.04.2011
Сообщений: 236

Padding-top в % и px

03.03.2015, 22:41. Показов 2130. Ответов 12
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Дан блок, шириной - 396 px. Если задать padding-top - 54px, а потом заменить на padding-top - 13.64% получаются разные отступ (раза в 1,5-2 больше). Почему?
0
Лучшие ответы (1)
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
03.03.2015, 22:41
Ответы с готовыми решениями:

Input type=text padding-top, padding-bottom в safari не работают
<!DOCTYPE html> <html lang="ru"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style> /*...

Не работает padding-top в <li>
Здравствуйте! Делаю боковую менюшку для сайта с помощью списков. Хочу чтобы эта менюшка всегда была вверху. Но она смещается из-за того...

Нет реакции на padding-top в CSS
В блоке nav не могу сместить свои ссылки пониже. Padding-top вообще никакого результата не дает... HTML &lt;!doctype html&gt; ...

12
Эксперт HTML/CSS
 Аватар для Fedor92
2964 / 2621 / 1068
Регистрация: 15.12.2012
Сообщений: 10,091
Записей в блоге: 11
03.03.2015, 23:16
Magellan_, а высота у блока какая? У Вас же отступ сверху, а не слева или справа - его надо считать по высоте, а не ширине блока...
1
14 / 14 / 0
Регистрация: 16.04.2011
Сообщений: 236
03.03.2015, 23:39  [ТС]
Так padding-top/bottom, margin-top/bottom считаются, вроде бы, от ширины родительского блока?
0
Эксперт HTML/CSS
 Аватар для Fedor92
2964 / 2621 / 1068
Регистрация: 15.12.2012
Сообщений: 10,091
Записей в блоге: 11
03.03.2015, 23:42
Ну представьте себе блок padding-top/bottom, margin-top/bottom - это вертикальные отступы и считать их нужно по высоте блока, а padding-left/right, margin-left/right - это горизонтальные отступы и считать их уже нужно по ширине...
1
14 / 14 / 0
Регистрация: 16.04.2011
Сообщений: 236
04.03.2015, 00:01  [ТС]
Нет, все-таки вы не правы. Попробуйте, поменяйте значение высоты, а потом ширины - http://codepen.io/mafellan/pen/ZYjemO
0
Эксперт HTML/CSS
 Аватар для Fedor92
2964 / 2621 / 1068
Регистрация: 15.12.2012
Сообщений: 10,091
Записей в блоге: 11
04.03.2015, 00:46
Цитата Сообщение от Magellan_ Посмотреть сообщение
Нет, все-таки вы не правы.
Интересно в чём...? Ширина моей талии 52 см назовите мой рост, если Вы по ширине научились высоту считать...
1
 Аватар для GalaX
701 / 573 / 59
Регистрация: 18.11.2008
Сообщений: 2,147
04.03.2015, 01:02
Цитата Сообщение от Magellan_ Посмотреть сообщение
Если задать padding-top - 54px, а потом заменить на padding-top - 13.64% получаются разные отступ (раза в 1,5-2 больше). Почему?
Потому что px это фиксированное растояние, а % динамичное зависимое от внешних факторов.
1
Эксперт HTML/CSS
 Аватар для Fedor92
2964 / 2621 / 1068
Регистрация: 15.12.2012
Сообщений: 10,091
Записей в блоге: 11
04.03.2015, 02:23
Лучший ответ Сообщение было отмечено Magellan_ как решение

Решение

Цитата Сообщение от Magellan_ Посмотреть сообщение
Нет, все-таки вы не правы. Попробуйте, поменяйте значение высоты, а потом ширины
Сори дезинформировал... Точно padding-bottom/top и margin-top/bottom будет высчитываться по ширине родительского блока... Чего-то в последнее время совсем плохо с памятью стало надо глицин попить, витаминки всякие... Ну соответственно вывод по Вашей теме скорее всего Вы высчитываете padding по ширине дочернего блока, хотя его необходимо посчитать по ширине родительского... В соседней теме всё нормально расписал, а здесь путаться начал... Печалька...

Не по теме:

Всё пора отдохнуть - заняться чем - нибудь творческим... :) Что-то много косяков в последнее время...

1
Эксперт HTML/CSS
 Аватар для Shakalaka
653 / 556 / 322
Регистрация: 27.01.2015
Сообщений: 1,374
04.03.2015, 14:41
Если padding задан в процентах, значение высчитывается от ширины РОДИТЕЛЬСКОГО элемента. Следовательно 13.64% не от 396px, а от ширины контейнера родителя
1
04.03.2015, 14:56

Не по теме:

Shakalaka, А чем Ваш пост:

Цитата Сообщение от Shakalaka Посмотреть сообщение
Если padding задан в процентах, значение высчитывается от ширины РОДИТЕЛЬСКОГО элемента. Следовательно 13.64% не от 396px, а от ширины контейнера родителя
отличается от моего?
Цитата Сообщение от Fedor92 Посмотреть сообщение
Ну соответственно вывод по Вашей теме скорее всего Вы высчитываете padding по ширине дочернего блока, хотя его необходимо посчитать по ширине родительского..
:)

0
Эксперт HTML/CSS
 Аватар для Shakalaka
653 / 556 / 322
Регистрация: 27.01.2015
Сообщений: 1,374
04.03.2015, 15:02
Fedor92, честно, дочитал только до Что сказать в свое оправдание - бывает))
1
04.03.2015, 15:05

Не по теме:

Не переживайте мне просто интересно стало... Вот и спросил... :)

0
496 / 130 / 19
Регистрация: 30.03.2010
Сообщений: 224
04.03.2015, 15:50
скорее всего блоки inline
их высота определяется свойством line-height, а padding-top рассчитывается по этой высоте
это легко проверить на примере:
HTML5
1
2
<div style = "width: 396px; line-height: 100px; padding-top: 13.64%">123</div>
<div style = "width: 396px; line-height: 10px; padding-top: 13.64%">123</div>
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
04.03.2015, 15:50
Помогаю со студенческими работами здесь

padding-top: 1% берёт процент от ширины родителя
Вот код: #content { padding: 1%; } &lt;div id=&quot;content&quot;&gt; Content &lt;/div&gt; но почему-то padding берётся от ширины! В чём дело?...

Почему меняется высота блока при увеличении padding-top?
Добрый день! Не могу понять такую вещь. Блок с display:inline-block должен вести себя как строка. Но когда я прописываю код ниже,...

как зделать чтобы было top.sait.ru а не sait.ru/top/
как зделать чтобы было top.sait.ru а не sait.ru/top/

Padding
&lt;div style=&quot;padding:10px;&quot;&gt; &lt;div&gt; Как заставить этот блог проигнорировать padding родительского блока?&lt;/div&gt; ...

Margin,padding
возможно ли в процентах как-то указывать ?


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
13
Ответ Создать тему
Новые блоги и статьи
http://iceja.net/ математические сервисы
iceja 20.01.2026
Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .
http://iceja.net/ сервер решения полиномов
iceja 18.01.2026
Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .
Расчёт переходных процессов в цепи постоянного тока
igorrr37 16.01.2026
/ * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит переходные токи и напряжения на элементах схемы. . . .
Восстановить юзерскрипты Greasemonkey из бэкапа браузера
damix 15.01.2026
Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Сукцессия микоризы: основная теория в виде двух уравнений.
anaschu 11.01.2026
https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/
WordPad для Windows 11
Jel 10.01.2026
WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .
Classic Notepad for Windows 11
Jel 10.01.2026
Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .
Почему дизайн решает?
Neotwalker 09.01.2026
В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru