Поиск по сайту

Результаты поиска по тегам 'padding'.

  • Поиск по тегам

    Введите теги через запятую.
  • Поиск по автору

Тип публикаций


Категории и разделы

  • Основной форум
    • Для начинающих
    • Проблемы верстки
    • Обсуждение работ
    • Работа форума
    • Флейм
  • Полезное
    • Библиотека полезных приемов и решений
    • Ресурсы
  • Веб-программирование
    • Javascript
    • Серверные технологии
    • СУБД
    • CMS
  • Работа: спрос, предложение, вакансии
    • Коммерческие услуги

Календари

  • События форума
  • IT События

Блоги

  • CMS (Системы управления контентом)



Фильтр по количеству...

Найдено 7 результатов

  1. Всем здравствуйте! Столкнулся с проблемой и никак не могу найти рабочее решение. Помогите неучу, пожалуйста! Вот ссылка на JSFiddle и пример кода: HTML: <div class="lineHeight"> HELLO // line-height method </div> <div class="padding"> HELLO // padding method </div> CSS: @import url('https://fonts.googleapis.com/css?family=Open+Sans'); div { font-family: 'Open Sans', sans-serif; font-size: 14px; height: 100px; background: lightgreen; margin: 5px; padding-left: 10px; box-sizing: border-box; } .lineHeight { line-height: 100px; } .padding { padding-top: 42px; /* (100px - 14px) / 2 - 1px */ } Ситуация следующая: В случаях с line-height и padding текст ровно по центру, отступы по 45px сверху и снизу: - Google Chrome (v. 55.0.2883.87 m); - Mozilla Firefox (v. 50.1.0); - Opera (v. 42.0.2393.94); - Safari (macOS, v. 10.0 12602.1.32.7); Для line-height отступы по 45px, для padding 46px сверху и 44px снизу: - Safari (Windows, v. 5.1.7 7534.57.2); В случаях с line-height и padding текст ровно по центру, отступы 46px сверху и 44px снизу: - Internet Explorer 11 (v. 11.576.14393.0); - Microsoft EDGE (v. 38.14393.0.0); Я понимаю, что в ряде случаев это не принципиально, но что делать если блок с текстом это, например, меню, а сбоку от текста расположена ровная иконка, положение которой задано через background-position. Выравниваешь иконку для одного браузера - плывёт в другом. Выглядит весьма заметно и некрасиво. И Бог бы с этим эксплорером, но дело вот в чём, на Android 6.0.1 (device pixel ratio 4.0) стандартный интернет браузер, а также скаченный Google Chrome центруют неровно, также наблюдается расхождение в 1 пиксель, а вот на это уже закрывать глаза не хочется (большой скрин с Android): Что примичательно, высота первой буквы на настольных компьютерах 10px, а на андроиде чуть больше. Разумеется добиться идеальной картинки, да ещё и во всех браузерах одновременно, невозможно, но ведь это не какой-то частный случай, а вполне закономерное желание разместить текст по центру меню-бара. Я буду очень признателен за Вашу помощь и пояснения на предмет "best-practices". Что я пробовал для решения данной проблемы: - Использовал разные шрифты, а также разные методы подключения внешних шрифтов: link через html / @import в CSS для Google Fonts, а также @font-face url для скаченных шрифтов; - Задавал размеры шрифта, отступы, line-height в em / rem / px; - Пробовал различные комбинации line-height + padding; - Для создания иконок меню пробовал псевдо элементы, это конечно же решает проблему расположения иконок относительно текста, но не решает проблему центровки по вертикали. P.S. CSS сброшен. Meta viewport задан. Доп. вопрос от новичка: Почему, задавая размер шрифта 14px, заглавная буква по факту занимает 10px? При этом если я использую буквы типа "Й" и "р", высота занимаемая текстом будет уже 16px, но никак не 14px. Что-же задают тогда эти пиксели в размере шрифта?
  2. http://cs540104.vk.me/c540107/v540107236/279e9/SWeHuGPdagk.jpg Почему когда задаешь отступы сбоку margin или padding, то отступ появляется только у первой строки? как сделать чтобы отступ был для всех строк <style>.wrapper{ width: 960px; margin: auto;}header{ background: url(../images/header.png) no-repeat;}.logo{ width: 307px; height: 100px; border-radius: 20px; background: #e7e7e8 url(../images/header.png) no-repeat; background-size: 100% auto; overflow: hidden; float: left;}.logo h1{ position: relative; top: 26px; left: 15px; height: 65px; width: 275px; font-size: 35px; text-align: center; color: #fff; padding-top: 14px; font-weight: bold; background: url(../images/logo.png) no-repeat;}.link{ float: left; margin-top: 61px; width: 215px;}.link a{ padding: 0 20px; text-decoration: none; font-size: 12px; text-transform: uppercase; font-weight: bold; color: #000; float: left; background: url(../images/a.png) no-repeat;}</style><div class="wrapper"><header><div class="logo"><h1>Logo</h1></div><div class="link"><a href="">Lorem ipsum dolor sit</a><a href="">Lorem ipsum</a></div><div class="link"><a href="">Lorem ipsum dolor</a><a href="">Lorem ipsum dolor sit amet, consectetur adipiscing</a></div><div class="link"><a href="">Lorem ipsum dolor</a><a href="">Lorem ipsum dolor</a></div></header></div>
  3. Всем привет! Подскажите, опытные верстальщики, откуда в некоторых ячейках таблицы появляются padding'и: http://joxi.ru/n2YY0kKc5Y1Z26 Я не так давно в вашей сфере, может эта банальная ошибка, но я не понимаю. Chrome говорит, что у ячейки они отсутствуют, но все равно их выделяет при наведении на слово padding внутри этого окошка: http://joxi.ru/Y2L8DXguL3W126 margin'ы у внутренних блоков убраны и при рассмотрении через html отладчик, если его можно так назвать, никакого влияния на эту область не дают. У таблицы стоит свойство cellpadding="0" Свойства для всех ячеек одинаковы, но у каких-то таких проблем нет, а у каких-то есть? С чем это может быть связано? Спасибо всем, кто имеет какие-нибудь предположения по этому поводу!
  4. Есть форма: http://jsfiddle.net/6BU8r/ Когда: .form-contact input[type="text"] {padding: 0;}Все инпут поля вписываются в рамки "form-content", а когда устанавливаем: padding: 0 20px; То происходит увеличение длины инпута и выход его за пределы? И второй вопрос - как вписать эти инпут-поля в "form-content", чтобы они не вылезали? Спасибо!
  5. Ребят при добавлении стилю DIVу элемента padding у этого DIVа увеличивается размер. Если на пальцах есть блок размеров 200 на 400. В его стиле прописываю padding:10px; и блок становится размером 220 на 420. Как этого избежать? Ведь padding должен просто делать отступы внутри блока а не менять его размер.
  6. .one { padding: 0.3em; } <span class="one">Hello, everyone</span> Почему в разных браузерах по-разному рисуется плашка (верхний отступ скачет)? И как сделать, чтобы она располагалась, как в Safari (центр по строчным буквам, а не прописным)?
  7. Думаю большинству знакомый баг в IE, когда при наборе длинного текста в input горизонтальный paddng не учитываться. И если в этом padding'е расположено фоновое изображение, то текст налазит на него. Обычно это решается дополнительным враппером/контейнером. Но как же не хочется для каждого такого поля добавляться дополнительный контейнер только, что бы исправить этот баг в IE. Существует ли решение этой задачи, без использования дополнительных тегов или js?