Как убрать границу между двумя изображениями? - PullRequest
Новая
       15

Как убрать границу между двумя изображениями?

5 голосов
/ 29 октября 2009

Я пытался установить поле и границу на 0, но все еще не работает. 

<style type="text/css">
img {margin:0;}
</style>
<body>

<img src="/static/btnNext.gif" border="0" />
<img src="/static/btnSave.gif" border="0" />

Как заставить два изображения оставаться близко друг к другу?

Ответы [ 7 ]

15 голосов
/ 29 октября 2009

Вы можете исключить CSS для изображения и поместить теги изображения на одной строке без пробелов. 

<img src="/static/btnNext.gif" border="0" /><img src="/static/btnSave.gif" border="0" />
6 голосов
/ 06 апреля 2012

Закомментируйте разрыв строки между ними. 

   <img src="/static/btnNext.gif" border="0" /><!--
--><img src="/static/btnSave.gif" border="0" />

Почему? HTML допускает столько пробелов (как разрывных, так и не) для форматирования кода, но отображает только первое. В вашем случае изображения, находящиеся на разных строках, интерпретируются как пробел между ними. Самое простое решение - поместить их в одну строку, но это не так удобно для чтения.

2 голосов
/ 29 октября 2009 
<style type="text/css">
img {margin:0; float: left;}
</style>
1 голос
/ 31 марта 2014

У меня просто была эта проблема, но я не смог найти ответ на свою проблему, во-первых, я не хочу, чтобы мои изображения всплыли влево; во-вторых, использование diplay: block не очень хорошая идея, потому что я хочу, чтобы они были встроены, также display: block in-line делает не работает.

РЕШЕНИЕ довольно простое, уберите «enter» и поместите ваши изображения в одну строку. Я объясняю:

НЕВЕРНО 

<img src="flower1.jpg"/>
<img src="flower1.jpg"/>
<img src="flower1.jpg"/>

OK 

<img src="flower1.jpg"/><img src="flower1.jpg"/><img src="flower1.jpg"/>

Надеюсь, это поможет.

0 голосов
/ 18 мая 2014

Удалить пробелы между img тегами и использовать css vertical-align:top

HTML:

<img src='http://i.imgur.com/wipljF1.png'/>NoSpaces<img src='http://i.imgur.com/wipljF1.png' class='playerpreviewbig'/>NoSpaces<img src='http://i.imgur.com/wipljF1.png' class='playerpreviewbig'/>

CSS: 

img {
width: 50px;
height: 50px;
padding: 0;
margin: 0;
vertical-align:top;
}
0 голосов
/ 29 октября 2009

Я бы посоветовал поместить каждое изображение в отдельный элемент div со стилем float: left. Эти 2 div должны быть заключены в родительский div, который сам по себе является float: оставленный как, 

<div style="float:left">
<div style="float:left">
<img src="/static/btnNext.gif" border="0" />
</div>
<div style="float:left">
<img src="/static/btnSave.gif" border="0" />
</div>
</div>
0 голосов
/ 29 октября 2009

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

<style type="text/css">
img {margin:0px; padding: 0px; float: left;border:0px}
</style>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...