←  Problemy

AMXX.pl: Support AMX Mod X i SourceMod

»

CSS
Białe znaki pomiędzy elementami inline-block

  • +
  • -
Ryuu's Photo Ryuu 05.04.2013

Witam.
Jak wiecie jest kilka sposobów na wyśrodkowanie div'ów. Najpowszechniejszym z nich jest ustawienie marginesów bocznych na "automatyczne" dopasowanie. Niestety, jeżeli wewnątrz tego wyśrodkowanego diva stworzymy np. 2 divy, który chcielibyśmy ustawić koło siebie (float) to niestety wysokość tego "wyśrodkowanego diva" nie będzie rosła wraz ze wzrostem div'ów wewnętrznych. Mam nadzieje, że do tej mniej więcej rozumiecie o co mi chodzi :>

Postanowiłem więc skorzystać z innej metody ustawiania div'ów koło siebie (oblewania - float). Ustawiłem więc tym "wewnętrznym" div'om display:inline-block. Wszystko ładnie, div'y wyświetlają się koło siebie, ale jest jedno ALE.
Problemem jest odstęp stworzony przez białe znaki. Problem ten znika, gdy w kodzie umieszczę div'y bezpośrednio po sobie, jednak z powodów estetycznych wstawiam ENTER, przez co występuje odstęp.

Tak wygląda aktualnie mój kod:
HTML:
<!-- KONTENT START -->
<div id="kontent-center">
<!-- FACEBOOK-->
<div id="facebook"></div>
<!-- INFORMACJE -->
<div id="info"></div>
</div>
<!-- KONTENT END -->
CSS:
#kontent-center {width:1000px;height:auto;margin:0 auto;white-space:normal;background:yellow;}
#facebook {width:600px;height:100px;background:#116db0;display:inline-block}
#info {width:300px;height:100px;background:#116db0;display:inline-block}
Efekt: http://s1.pokazywark...430/6764969.jpg (jakość ze względu na hosting ;/)

Jak już wspomniałem, gdy ustawie elementy bezpośrednio po sobie ten 'defekt' znika
html:
<!-- KONTENT START -->
<div id="kontent-center">
<!-- FACEBOOK-->
<div id="facebook"></div><div id="info"></div>
</div>
<!-- KONTENT END -->
Efekt: http://s1.pokazywark...430/6764972.jpg

Niby wiele nie trzeba, aby naprawić ten problem, jednak wolę mieć estetyczny kod. Próbowałem white-space:nowrap,letter-padding:0, word-padding:0 jednak nie pomogło.

Tu się rodzi pytanie do Was koledzy webmasterzy, jak zniwelować generowanie białych znaków ? :)
Pozdrawiam.
Edited by Ryuu, 05.04.2013 21:55.
Quote

Seba's Photo Seba 06.04.2013

jak zniwelować generowanie białych znaków

Zacząć używać block zamiast inline-block.

Do 99.99% layoutów wartość inline-block nie jest potrzebna, pomijam już kwestię kompatybilności.
Edited by Seba, 06.04.2013 00:08.
Quote

  • +
  • -
Ryuu's Photo Ryuu 06.04.2013

Właśnie nigdy nie robiłem inline block, postanowiłem teraz spróbować.
Przy takim oto kodzie:
(HTML bez zmian - taki jak w poprzednim poście)
CSS:
#kontent-center {width:1000px;height:20px;margin:0 auto;white-space:normal;background:yellow;}
#facebook {width:600px;height:100px;background:green;float:left}
#info {width:300px;height:100px;background:red;float:left;margin-left:100px}

Efekt wychodzi taki: http://s1.pokazywark...452/6769282.jpg
Mi właśnie zależy na tym, aby wysokość #kontent-center powiększała się automatycznie wraz ze wzrostem wysokości div'ów wewnętrznych.
Quote