Białe znaki pomiędzy elementami inline-block
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:
Jak już wspomniałem, gdy ustawie elementy bezpośrednio po sobie ten 'defekt' znika
html:
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.
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.
Seba 06.04.2013
Zacząć używać block zamiast inline-block.jak zniwelować generowanie białych znaków
Do 99.99% layoutów wartość inline-block nie jest potrzebna, pomijam już kwestię kompatybilności.
Edited by Seba, 06.04.2013 00:08.
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:
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.
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.