В обычном процессе разработки нам часто нужно использовать несколько изображений.
<! Border-bothm: 1px solid red;} ul {border: 1px Solid Blue; Img src = lipeng.png> </li> </ul> </body> </html>Но в это время мы нашли проблему, почему под моей картинкой есть дополнительная линия?
Что происходит?
Разве я не прояснил внешнюю и внутреннюю границу между IMG?
На самом деле, это на самом деле призрак, который встроенные элементы.
Любой видимый элемент, который не является элементом, блоком, является внутренним ассоциированным элементом, и характеристикой его производительности является форма макета линии. ---- "Авторитетное руководство CSS"В чем смысл?
Это означает, что на самом деле, например, текст изображения и другие элементы внутренней ассоциации, он соответствует базовой линии родителей, но вы выровнены с базовым уровнем.
Поскольку мы знаем причину этой проблемы, гораздо проще решить ее.
1. Первое решениеПоскольку это встроенный элемент, эта проблема может естественным образом решить эту проблему просто и грубо и грубо, то есть изменить наш элемент на персонализированную личность, может ли она быть изменена от встроенного на блокировку?
<Стиль = текст/CSS> {высота: 200px; : 0; 2. Второе решениеЭто слишком грубо, пол изменен, как мы можем счастливо играть, поэтому мы должны попробовать кривую, чтобы сохранить ее.
<Стиль = текст/CSS> {высота: 200px; ;Видно, что это также может достичь желаемых результатов.
Причина в том, что атрибут по умолчанию вертикальной анкеты является базовым.
3. Третье решениеНо метод выравнивания изменен, поэтому он также может вызвать проблемы. Теперь, когда вы больше не находитесь в текущей документации, вы, естественно, не будете выровнены со ссылкой на этот текст, когда вы выкладываете.
Мы можем использовать плавание.
<Стиль тип = CSS> IMG {Height: 200px; синий;Это также может решить эту проблему, но пожалуйста, обратите внимание, что, хотя плавание хорошее, не будь жадным.
Вы должны быть в состоянии правильно решить влияние плавания, и если вы первоначально планировали выполнить эффект текста окружающей среды, то использование плавания должно быть вашим лучшим выбором.
4. Четвертое решениеЕсли все вышеупомянутые схемы не могут решить ваши проблемы, то только мое большое убийство приносится в жертву.
Вы можете дать своему родительскому элементу, чтобы установить размер текста на 0.
<Стиль тип = текст/CSS> IMG {высота: 200px; ;Поскольку вы выровнены в соответствии с базовой линейкой текста, я установите текст напрямую, чтобы вы не смогли его позиционировать, но этот подход рекомендуется только тогда, когда вы спешите.
СуммироватьНу, вышеупомянутое четыре решения этой проблемы. Если у вас есть какие -либо вопросы, вы можете оставить сообщение для общения.