Пробел под изображением

Я не могу удалить пробел под моими изображениями после добавления границы.Пробел под изображением

Как я могу избавиться от этого?

<div style="width: 1200px;"> 
<div style="float: left; width: 358 px; margin: 0px 7px 0px 0px; border: 1px solid #021a40;"><img src="{{media url="wysiwyg/3row/3row-no-boarder_07.jpg"}}" alt="" /></div> 
<div style="float: left; width: 358 px; margin: 0px 7px 0px 7px; border: 1px solid #021a40;"><img src="{{media url="wysiwyg/3row/3row-no-boarder_04.jpg"}}" alt="" /></div> 
<div style="float: left; width: 358 px; margin: 0px 0px 0px 7px; border: 1px solid #021a40;"><img src="{{media url="wysiwyg/3row/3row-no-boarder_09.jpg"}}" alt="" /></div> 
<div style="clear: both;">&nbsp;</div> 
</div> 
</div> 
</div>

http://postimg.org/image/5rvgc5h8p/

Fiddle: https://jsfiddle.net/mastervision/zap4smbm/

Я использую редактор Magento: http://postimg.org/image/c62ljlmoj/

источник

2015-06-08 m_schou

Добавить

div{ 
line-height: 0; 
}

Fiddle

источник

2015-06-08 15:11:38

Это решение проблемы «display: inline-block», но все же я предпочел бы установить изображение на «display: block», потому что если OP когда-либо делал текстовые сообщения, основанные на его контейнере изображений, ему было бы довольно сложно найти эту строку :) – SidOfc

line-height: 0; сделал трюк! Imagefix доказательство: http://postimg.org/image/tmf8meycf/ ** установки Magento **: http://postimg.org/image/b5ktvlie7/ Хотя, как вы видите в моем Magento я добавить путь 3 раза, у меня такое чувство, что я делаю это не так организованно, есть ли лучший способ настроить код? –

Это потому, что источник вашего изображения, предположительно, не является правильным соотношение размера или аспект для этого размера. Если бы вы могли опубликовать скрипку, я бы смог проверить эту теорию. Вы можете исправить это, используя свойство object-fit или используя свойство background.

источник

2015-06-08 15:06:46 DevNebulae

Я добавил скрипку в поток сейчас :) –

ok, как я могу найти/вычислить правильное соотношение сторон? Я добавил скрипку к сообщению. –

Попробуйте img {display: block;}

если изображения размеры правильно, и вы все еще есть пробелы.

источник

2015-06-08 15:08:48

ОК, что это за строка? –

Изображения являются «встроенными» элементами, поэтому браузеры добавляют немного пробелов в исходное положение. Это изменяет поведение по умолчанию. –

ok, wierd, они добавляют, почему пространство, есть ли веская причина, почему они это делают? Извините, если я задаю глупые вопросы. –

В своем флотированном контейнере дайте свои изображения display: block; и width: 100%.

Это приведет к тому, что изображение растягивает его ширину до ширины его родителей и если этот родитель не имеет определенной высоты, он должен соответствовать точно.

Если это не работает, пожалуйста, напишите комментарий под мой ответ, и я настроим случай для вас, когда я нахожу время;)

OFFTOPIC

О и, конечно, вы будете хотите избавиться от всего этого встроенного CSS. встроенный css - это чистое дублирование кода и может быть разрешено с помощью external stylesheets.

В такой таблице стилей вы можете стиль по имени в основном, так что вы можете сделать это в таблице стилей:

.my-image-box { 
    position: relative; 
    float: left; 
    width: 300px; 
    height: auto; 
} 

.my-image-box img { 
    display: block; 
    width: 100%; 
}

Тогда в вашем HTML, связав свои свежие таблицы стилей вы можете сделать это:

<div class="my-image-box"> 
    <img src="..." /> 
</div>

Это означает, что у вас нет всего этого громоздкого CSS в вашем HTML-файле, что делает его намного меньшим и добавленным бонусом, когда вы что-то изменяете в своей таблице стилей, вы будете менять его везде в одно и то же время: D

ИМО - это двойная победа!

источник

2015-06-08 15:11:14 SidOfc

Спасибо за хороший ответ. хорошо, я попробую. Хотя я работаю в Magento (система cms), и у меня есть текстовый редактор для публикации. Как бы вы настроили свой код, когда у вас есть только одно поле редактора Magento. http://postimg.org/image/c62ljlmoj/ Пс. Вся эта настройка кода имеет тенденцию меня путать, так как я не уверен, какая часть кода влияет на другую часть кода. –

Хммм ... Да, я заметил, что вы использовали систему шаблонов, но просто didn я не знаю, какой из них;) Я никогда не работал с magento, поэтому я не могу вам помочь, но могу ли я задать вам и быстрый вопрос? Потому что я хотел бы спросить, если вы программист из любопытства;) – SidOfc

Один из вариантов будет использовать vertical-align собственность; например

img { 
    vertical-align: baseline; 
}

источник

2015-06-08 15:17:38 focorner

не работает при первой же попытке. –

Пробел под изображением

ответ

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