Dwie <img> bez odstępów

<html> 
<head> 
    <meta name="viewport" content="width=device-width"/> 
    <title>HAHAHA</title> 
    <STYLE TYPE="text/css" media="screen"> 
    * 
    { 
    padding: 0; 
    margin: 0; 
    } 
    body 
    { 
    padding: 0; 
    margin: 0; 
    } 
    #flexbox 
    { 
    //display: -webkit-box; 
    //-webkit-box-orient: horizontal; 
    //-webkit-box-align: stretch; 
    //width: auto; 
    } 
    </STYLE> 
</head> 
<BODY style="padding:0;margin:0;border:0;"> 
    <!--<div id="flexbox"> 
    <img src="1.jpg" width="100px" style="padding:0;margin:0;"/> 
    <img src="1.jpg" width="100px"/> 
    <img src="1.jpg" width="100px"/> 
    </div>--> 
    <img src="http://is.gd/kjxtj" style="padding:0;margin:0;border:0;"/> 
    <img src="http://is.gd/kjxtj" style="padding:0;margin:0;border:0;"/> 
</BODY> 
</html>

Dlaczego te obrazy zawsze mają niewielką przestrzeń między nimi, nawet jeśli mam wyściółka & margines ustawiony na 0 na ciele i wszystkich innych elementów strony?Dwie <img> bez odstępów

OK, to jest pełny, nieedytowany kod.

EDYCJA: właśnie odkrył linię podziału między dwoma IMG. SO ... Nie mogę nacisnąć klawisza Enter między dwoma elementami? lol ... :)

Źródło

2011-01-07 denicio

czy możesz podać nam swój kod CSS? – Sotiris

To nie jest tak samo na twój kod: http://jsbin.com/atigu5 - kod, który nie pokazałeś nam, powoduje problem. –

Upewniłeś się, że obrazy nie mają jakiejś granicy w rzeczywistym obrazie ... –

domyślnie wyświetlane są obrazy inline, co prawdopodobnie oznacza problem. Białe znaki w HTML są skondensowane, ale nadal będą wyglądały jak spacje, jeśli istnieją między elementami HTML.

Poniższy kod HTML zostanie wyświetlony z niewielkim odstępem między obrazami.

<div class="images"> 
    <img src="http://placehold.it/400x300" /> 
    <img src="http://placehold.it/400x300" /> 
</div>

Jeśli chcesz, aby były dosunięte do siebie, można spróbować pływające obrazy:

img { 
    float: left; 
}

Pływające pochodzi z jego własnych problemów, jeśli jesteś nowy w CSS.

Alternatywą jest dostosowanie znaczników w celu pozbycia się dodatkowych znaków spacji. Częstym sposobem na to nazywane jest „podejrzany” składnia:

<div class="images" 
    ><img src="http://placehold.it/400x300" 
    /><img src="http://placehold.it/400x300" 
/></div>

Jak to działa jest to, że zamknięcie > charakter każdego elementu zostanie przeniesiona do tuż przed początkiem < charakter taki, że nie ma white-space zasięgu dowolny element HTML jako treść. Zamiast tego białe spacje na wcięcia znajdują się w znacznikach HTML, gdzie białe znaki są całkowicie ignorowane.

Był w3c feature request for a new property on white-space, który teoretycznie mógłby umożliwić CSS usunięcie wszystkich spacji z elementu. Oryginalna propozycja to white-space: ignore;, ale zdecydowanie wolę (i zasugerowałem) white-space: none;. Wydaje

jednak, że aktualizowanie white-space nie może się zdarzyć, a zamiast sugestia było zastosowanie schematu flexbox usunąć spacje odpowiednio:

_{rozciągający się od oryginalnego przykład HTML:}

.images { 
    display: flex; 
}

Of Oczywiście minie trochę czasu, zanim Flexbox będzie miał wystarczającą obsługę wielu przeglądarek, aby był przydatny w środowisku komercyjnym, więc na razie zalecam trzymać się podejrzanej składni.

Źródło

2011-01-07 19:02:43 zzzzBov

Jest to najbardziej kompletna odpowiedź, gdy przejrzałem ją po pewnym czasie. A także chciałbym dodać do twojej odpowiedzi, że istnieje "blok inline", który wydaje się najbardziej poprawny na moje pierwsze pytanie. – denicio

Wierzę, że to jest również konieczne w przypadku przeglądania w starszej wersji IE

img { 
    border:0 
    }

Źródło

2011-01-07 19:07:26

Chociaż myślę, że problem jest z innego punktu w swojej marży i/lub CSS, chciałbym Proponuję zapewnienie, że masz wyzerowany zarówno margin, padding i border dla elementu img:

img { 
margin: 0; 
padding: 0; 
border-width: 0; 
}

Ten powinny dbać o problemie, ale jeśli nie, możemy potrzebować zobaczyć twój prawdziwy html i css (lub wersję demonstracyjną, która odtwarza problem, pod numerem JS Bin lub JS Fiddle), aby pomóc ci dalej.

Źródło

2011-01-07 19:07:58

Nie mogę nacisnąć enterin między dwoma elementami? lol ... :)

Nic nie odróżnia jednego rodzaju białego miejsca od drugiego w większości części HTML.

Można jednak formatować kod taki:

<img src="..." alt="..." 
><img src="..." alt="...">

... usunąć przestrzeń pomiędzy elementami.

Źródło

2011-01-07 19:18:09 Quentin

Dzięki, nadal wydaje mi się to takie dziwne :) – denicio

Jest to dobry trik do pokonania to:

umieścić swoje zdjęcia wewnątrz <div> a następnie ustawić

font-size:0px;

do <div>.

Możesz kontynuować utrzymywanie elementów w oddzielnych liniach.

Źródło

2013-05-11 03:32:58

Dwie <img> bez odstępów

Odpowiedz

Powiązane problemy