Отображает встроенный блок, который я не могу удалить

Я пробовал каждую комбинацию отображения, поплавка, ширину/высоту и задавал все поля и прокладки до 0, но имел контейнер с дисплеем: встроенный блок всегда создает запас дна, что можно удалить только путем добавления стиль «Нижнее: - ... точек»Отображает встроенный блок, который я не могу удалить

Пожалуйста, обратите внимание на код, это очень простой index.php

Во всяком случае я открыт для любого решения, я просто хочу, чтобы div «.posts» содержал сообщения, поэтому, если есть решения без «display: inline-block», это нормально для меня.

Спасибо всем заранее

источник

2015-09-25 Anonymous

какого место.? пространства сразу после синих блоков.? – CodeRomeos

Почему в первую очередь требуется встроенный блок? Почему бы не заблокировать? (Или ничего, поскольку div по умолчанию является блочным элементом) –

Так или иначе, поскольку inline-block делает элемент inline, он получает дополнительную высоту от линии-высоты. Если вы установите для родительского (в данном случае '# main') строку-высоту значение 0, у вас не будет пробела. Возможно, вам придется установить другую высоту строки для внутренних элементов, но отменить это для вашего фактического текста. –

Пространства вы видите, это пространство дана descender высоты букв, как строчной у или г, когда значение отображения элемента устанавливаются в inline-block;. Вы по существу относитесь к элементу, подобному тексту, когда вы устанавливаете его на display: inline-block;.

Чтобы исправить, удалите display: inline-block; с вашего .posts DIV. Он не нужен для вашего макета.

источник

2015-09-25 17:32:07 hungerstar

Я не знал, что пространство было связано с спусковым механизмом!Всегда думал, что встроенные элементы просто раздражают. Спасибо за это! –

Если вы выполните поиск 'space под тегом img'. Это пространство связано с пометкой '' 'inline-block' и предоставляет место для descender. [SO post, иллюстрирующий проблему] (http://stackoverflow.com/questions/13917008/space-under-img-tag). – hungerstar

Я исправил эту проблему раньше, установив «display: block» на изображениях, но снова подумал, что это просто какая-то странная причуда. Обратите внимание, что слово «descender» на самом деле не упоминается в указанной вами ссылке :) (я не OP btw, если вы это пропустили) –

Прежде всего, вы используете #post в нескольких местах. Это очень плохая практика. Использование идентификаторов должно быть уникальным. В результате вы получите действительно смешанный вывод CSS. Измените их на .post. См. https://css-tricks.com/the-difference-between-id-and-class/

Во-вторых, .posts должен быть display: block, так как вы не выстраиваете их в ряд. См.: http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/

В-третьих, ваш .sep имеет margin: 8px 33px, что создает пространство. Если вы удалите это поле, у вас не будет этого места.

источник

2015-09-25 17:29:00

'.sep' не создает пространство между' .posts' и '.footer'. Удалите класс '.sep' в Dev Tools, и вы увидите. Пожалуйста, см. Мой ответ о том, почему. – hungerstar

Хорошее наблюдение. Спасибо за разъяснение. –

Фигурный я мог бы также отправить это в ответ:

Я не понимаю, почему это должно быть inline-block в первую очередь, а не регулярные block, но в случае, если она does- так inline-block делает элемент inline, он получает дополнительную высоту от ~~линия-высота~~descender. Если вы установите его родительский (в этом случае #main) line-height: 0, у вас не будет дополнительного места.

Вам придется восполнить это позже, указав свои внутренние элементы другим line-height, например .posts { line-height:1.5 }, или ваш текст не будет иметь высоты.

источник

2015-09-25 17:31:08

Спасибо, что это сработало –

вы можете добавить font-size:0 свойства к стойкам класса и изменить его значение в посте класса в соответствии с вашим требованием

источник

2015-09-25 17:35:13 aje

Да, я вижу, что, установив размер шрифта или высоту строки в 0, он работает даже с дисплеем: встроенный блок. Большое спасибо! –

Отображает встроенный блок, который я не могу удалить

ответ

Смежные вопросы