Próbowałem ustawić margines i ramkę na 0, ale nadal nie działa.Jak usunąć margines między dwoma obrazami?
<style type="text/css">
img {margin:0;}
</style>
<body>
<img src="/static/btnNext.gif" border="0" />
<img src="/static/btnSave.gif" border="0" />
Jak zrobić dwa zdjęcia blisko siebie?
Możesz wyeliminować css dla obrazu i umieścić tagi graficzne na tej samej linii bez spacji.
<img src="/static/btnNext.gif" border="0" /><img src="/static/btnSave.gif" border="0" />
+1 to jest poprawna odpowiedź w tym przypadku, ponieważ nie wywołuje żadnych skutków ubocznych (co 'float: left' i' display: block' do). –
@jeerose +1, dzięki! @Mak: w FF 3.6 i Safari przy użyciu DOCTYPE twój przykład działa idealnie, a nowe linie między obrazami są IGNOROWANE! Wyjątkiem (jak zwykle) jest objaśnienie IE7 (nie próbowałem IE8), które pokazuje to dziwne zachowanie, a jedynym obejściem wydaje się być sugerowane przez jeerose. –
<style type="text/css">
img {margin:0; float: left;}
</style>
nie zaleca się używania pływaka w tym przypadku – GusDeCooL
ten css powinien trzymać obrazy blisko siebie bez żadnych kosmicznych, wierszami lub granic między obrazami ...
<style type="text/css">
img {margin:0px; padding: 0px; float: left;border:0px}
</style>
Proponuję umieścić każdy obraz w div posiadające indywidualny styl pływaka :lewo. Te 2 DIV powinny być zamknięte w div nadrzędnej, która sama jest float: left podobnego
<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>
komentarz out przerwę linii między nimi.
<img src="/static/btnNext.gif" border="0" /><!--
--><img src="/static/btnSave.gif" border="0" />
Dlaczego? HTML pozwala na tyle spacji (zarówno break, jak i non) dla formatowania kodu, ale wyświetla tylko pierwszą. W twoim przypadku obrazy znajdujące się na różnych liniach są interpretowane jako przestrzeń między nimi. Najprostszym rozwiązaniem jest umieszczenie ich obu na jednej linii, ale to nie jest tak czytelne.
Po prostu miałem ten problem, ale nie mogłem znaleźć odpowiedzi na mój problem, po pierwsze nie chcę, aby moje obrazy były unoszone w lewo; po drugie, używanie diplay: blok nie jest dobrym pomysłem, ponieważ chcę je w linii, także display: block in-line marki nie działa.
ROZWIĄZANIE jest dość łatwe, usuń "enter" i umieść obrazy w tej samej linii. Wyjaśnię:
ŹLE
<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"/>
więc nadzieję, że to pomaga.
Dokładnie tak brzmi przyjęta odpowiedź na 5 lat przed tym. – Gary
usuń spacje między img tagów i użyć 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;
}
to chyba powrót linia między 2 przyciski, które jest problemem – dnagirl