Jak usunąć marginesy wokół obrazków?

0

Chcę ustawić w jednym wierszu 3 obrazki tak, aby przylegały do siebie i skalowały się proporcjonalnie wraz ze zmianą szerokości strony. Niestety między obrazkami są odstępy, których nie potrafię usunąć.

<div class="container">
	<div class="over"></div>

	<div class="content">

		<div class="ins">
			<img src="img1.png">
		</div>
		<div class="ins">
			<img src="img2.png">
		</div>
			<div class="ins">
			<img src="img3.png">
		</div>
	</div>

	<div class="over"></div>
</div>
.container{
	margin: 0px auto;
	outline: 2px dotted gray;
	width: 80%;
}

.over{
	display: block;
	height: 200px;
}

.content{
	display: block;
	outline: 2px solid green;
	width: 100%;
}

.ins{
	display: inline-block;
	margin: 0px;
	padding: 0px;
	width: 33%;
}

img{
	width: 100%;
    height: auto;
    display: block;
    margin: 0px;
    padding: 0px;
}

Jak to naprawić?

1

Gdy w kodzie źródłowym HTML masz linię tekstu, obrazów lub elementów, które mają display:inline-block, lub istnieje między nimi spacja (spacje, tabulatory, nowe linie - cokolwiek) zostanie dodany między nie pojedyncza spacja w momencie, gdy strona jest wyświetlana. Dlatego gdy dasz 33% na te divy, to te spacje spowodują, że elementy się przesuną, bo przekroczysz 100% (nawet o jakąś tysięczną część procenta).

Generalnie rozwiązań jest kilka i są bardzo proste. Przenieś tagi rozpoczynające div.ins obok zamykających, w ten sposób:

<div class="container">
    <div class="over"></div>
 
    <div class="content">
 
        <div class="ins">
            <img src="http://www.softwarert.com/wp-content/uploads/2012/06/short-linkedin-url.png">
        </div><div class="ins">
            <img src="http://www.softwarert.com/wp-content/uploads/2012/06/short-linkedin-url.png">
        </div><div class="ins">
            <img src="http://www.softwarert.com/wp-content/uploads/2012/06/short-linkedin-url.png">
        </div>
    </div>
 
    <div class="over"></div>
</div>

Możesz również dać margines, powiedzmy margin-left:-2px i też powinno to zadziałać. Osobiście proponuję dać float:left i display:block, bo i tak masz to zamknięte w kontenerze, w którym nic innego nie ma. Demo tutaj http://jsfiddle.net/w08kgnL0/2/

0

@Fi3rce wielkie dzięki za pomoc! :-)

1 użytkowników online, w tym zalogowanych: 0, gości: 1