Odstępy pomiędzy znacznikami <a>

pytanie zadane 14 lipca 2015 w HTML i CSS przez PreZmyK Pasjonat (21,470 p.)
zamknięte 15 lipca 2015 przez PreZmyK

Witam!

mam sobie taki kodzik https://jsfiddle.net/JdbhV/1275/ i pomiędzi borderem a textem jest mała szpara. Jak ustawię margin-left: -4px; to wszystko jest cacy, ale to chyba nie powinno być tak? Moje pytanie z czego to wynika? Sprawdzałem margin, padding text-indent i nic. Dlatego moje pytanie na forum ;)

Dzięki i pozdtawiam.

komentarz zamknięcia: rozwiązany

2 odpowiedzi

odpowiedź 14 lipca 2015 przez Comandeer Guru (601,110 p.)

To jest spacja w kodzie. inline-block są traktowane jako tekst, stąd tak to działa. Są dwa sposoby:

usunięcie spacji - niezawodny i najmniej hackowaty: https://jsfiddle.net/Comandeer/bz3qeauo/
font-size: 0 dla rodzica i odpowiedni font-size dla dziecka - również niezawodny, ale już hackowaty: https://jsfiddle.net/Comandeer/qyjaaukw/
UWAGA! Pamiętaj, że tutaj jednostka em nie zadziała (gdyż ona bierze czcionkę z rodzica, a 1.5*0 to wciąż zero ;)). rem natomiast bierze rozmiar z :root (czyli html)
no i jest jeszcze to margin-left: -4px, które jednak może nie działać z różnymi czcionkami

BTW warto spojrzeć też tutaj odnośnie nawigacji i list ;) https://css-tricks.com/wrapup-of-navigation-in-lists/

komentarz 14 lipca 2015 przez Czort Nałogowiec (32,500 p.)

Albo float:left; i display:block; zamiast display:inline-block;

komentarz 14 lipca 2015 przez PreZmyK Pasjonat (21,470 p.)

Tego to się nie spodziewałem, że Enter<- pomiędzy znacznikami będzie miał wpływ na wyświetlenie kodu ;]

Z listy zrezygnowałem, ponieważ nie wiem jak zabezpieczyć ją przed rozjeżdżaniem przy pomniejszaniu strony.

Dzięki za odpowiedzi.

komentarz 14 lipca 2015 przez Comandeer Guru (601,110 p.)

@PreZmyK można to ładnie załatwić media queries choćby.

@Czort float ma swoje problemy i osobiście łatwiejsze do rozwiązania wydają mi się te z inline-block

komentarz 14 lipca 2015 przez PreZmyK Pasjonat (21,470 p.)

tak, ale chcialem, żeby menu było wyrównane do prawej strony a przy float: right; menu robi się "po żydowsku" :P

komentarz 14 lipca 2015 przez Comandeer Guru (601,110 p.)

Przy inline-block można to zrobić przez text-align: right na rodzicu

odpowiedź 14 lipca 2015 przez Eimens Maniak (69,240 p.)

nav a {
       border-right: 1px solid black;
       display: inline-block;
padding: 0 10px;
       font: bold 5em Tahoma;
       font-size: 1.5em;
       letter-spacing: 0.3em;
       text-decoration: none;
       color: black;
margin: 0 -2px;
       }

Zawsze są takie małe szparki jak użyjesz <a>

@down

Encyklopedia wiedzy o.O