Usuwanie dodatkowej spacji na dole listy HTML Element

Question

Czy istnieje sposób na usunięcie dodatkowej przestrzeni wyświetlanej u dołu znacznika pozycji listy HTML bez ustawiania stałej wysokości elementu listy? tj. Chciałbym, aby element listy zawijał się do jego treści.

Poniższy kod pokazuje 3 obrazy na poziomej liście, ale wysokość każdego znacznika li jest 4px większa niż obraz. Chciałbym, aby zawinął się wokół obrazu, tj. Miał tę samą szerokość i wysokość. Szerokość jest obecnie taka sama, ale po prostu nie mogę dopasować wysokości.

HTML:

<ul> 
    <li><img alt="img1" src="img1.jpg" /></li> 
    <li><img alt="img2" src="img2.jpg" /></li> 
    <li><img alt="img3" src="img3.jpg" /></li> 
</ul> 

CSS:

li 
{ 
    display:block; 
    float:left; 
    margin:0; 
    padding:0; 
    background-color:Yellow; 
} 

Answer 1

To jest Twój kod: http://jsfiddle.net/23LcK/

Szczelina ma nic wspólnego z li s. Jest to miejsce zarezerwowane dla urządzeń dolnych w literach takich jak g i p (ponieważ elementy img s są elementami inline).

można usunąć go z żadnym z nich stosuje się do li img:

• display: block: http://jsfiddle.net/23LcK/1/
• vertical-align z top lub bottom: http://jsfiddle.net/23LcK/2/

Answer 2

Należy to zrobić to za Ciebie.

ul{margin-bottom:0} 

Answer 3

Li jest zawijany w ul, który domyślnie ma dopełnienie. Dlatego, jak powiedział @ Michael, musisz wyzerować dopełnienie elementu ul.

Aby uniknąć takich problemów, zawsze staraj się używać reset.css.

FYI: Przeglądarki stosują domyślny styl CSS na stronach internetowych. Dlatego widzisz elementy h1, które są duże, gdy nie ma CSS w twojej witrynie. Ponieważ przeglądarki mają domyślny CSS. A ponieważ przeglądarki pochodzą z różnych firm, mają różne domyślne CSS. Na przykład przeglądarka może wykorzystywać 10px marginesów dla akapitów, a inna przeglądarka 12px. Oznacza to, że zawsze masz niespójności w swoim projekcie. Ale resetowanie CSS składa się z ogólnych reguł, które usuwają te domyślne style CSS.

Answer 4

li img { 
    vertical-align: bottom; 
} 

Answer 5

Prawdopodobnie istnieje domyślny margines lub dopełnienie na elemencie img w przeglądarce, której używasz. Można usunąć tę używając coś takiego:

li img { 
    margin: 0; 
    padding: 0; 
} 

Ponieważ różne przeglądarki internetowe korzystania różne style domyślne zaleca się stosowanie stylów resetowania. Ustawia to cały ładunek na rozsądne wartości domyślne, aby uzyskać bardziej spójną stylistykę w różnych przeglądarkach. Ponieważ resetuje wszystko do rozsądnych wartości domyślnych, zawsze powinieneś załadować reset arkusza stylów przed innymi arkuszami stylów.

Jak już wspomniałem @Saeed, istnieje dobry arkusz stylów resetowania, a także więcej informacji o tym, dlaczego warto z nich korzystać here.

Answer 6

Ustaw wysokość linii: 0; na LI

li { 
    line-height: 0; 
} 

Oto jsfiddle udowodnić, że to działa - http://jsfiddle.net/jm9Tj/