Przesunięcie po usunięciu podkreślenia

Question

Witam mam problem ponieważ gdy zrobiłem wszystkie kafelki (coś ala win 8) w sumie robiłem na wzór Pana Mirosława. I chciałem ,żeby link w 1 kafelku zmienił się z niebieskiego na biały ten kafelek sie rozjechał. Zauważyłem ,że dzieje się tak gdy dodam do " <a href="#" > " "class="kwadrat1" " wychodzi wtedy takie coś <a href="#" class="kwadrat1"> i to powoduje delikatne rozjechanie się kafelka. Nie mam pojęcia w czym tkwi ten problem. Zrobiłem tym drugim sposobem który jest na filmiku. Pewnie powiecie czemu nie spróbowałem 1. Ponieważ jestem ciekawy błędu i nie zostawię go dopóki nie bedę wiedział dlaczego tak sie dzieje. :D

 

http://codepen.io/Kondzik/pen/eZLLrV

Answer 1

<a href="#" class="kwadrat1">
	<div class="kwadrat1">
		<i class="icon-user"><br/>O mnie</i>
	</div>
</a>

Myk jest taki, że masz element o klasie kwadrat1 w elemencie o klasie kwadrat1. margin-left z tej klasy powoduje, że div.kwadrat1 jest przesuwany o 10px w prawo i dlatego "wystaje".

Comments

Zgadzam się z Argeento, a jeżeli chodzi o samodzielne rozwiązywanie takich problemów to jest to bardzo proste. Chociaż by konsola, w której możesz na szybko podejrzeć cały kod. 

Klikasz prawym i "zbadaj". po najechaniu na jakiś element pokaże ci się jego rzeczywista wysokość i szerokość, margines, padding itp. Dzięki temu bardzo łatwo wyhaczyć błąd i go poprawić, co usprawnia twoją pracę nad stroną.