Sprawdzenie kodu strony, display inline-block wychodzenie diva poza rozmiar przy ustawieniu marrginesu

pytanie zadane 2 maja 2017 w HTML i CSS przez kevin Mądrala (5,010 p.)
zmienione kategorie 2 maja 2017 przez Arkadiusz Waluk

Witam!

Wcześniej założyłem wątek z głównym pytaniem co robić jeżeli nie jestem pewny rozwiązania, głównie odpowiedź polegała na tym żebym pytał. Więc naskrobałem prosty kawałek kodu który przedstawia pewne nieścisłości https://jsfiddle.net/adriansikora344/gdmh23d2/ w oknie ze stylami są pytania które wypiszę poniżej ale mam też dwa inne:

1. Po użyciu display: inline-block mam przestrzeń pomiędzy divami aby całkowicie temu zaradzić na wszystkich przeglądarkach wystarczy mi margin-right: -4px ? Czy muszę wykorzystać wszystkie rozwiązania ze strony https://css-tricks.com/fighting-the-space-between-inline-block-elements/

2. Nadawanie stylów za pomocą # id wystrzegać się jak ognia ?

3. dispaly: inline-block to teraz trend ?

Pytania z pliku css:

1. Jak mam ustawić stopkę jeżeli chcę żeby była zawsze na samym dole strony ? Ustawić ją na position fixed i bootom: 0; ?

2. Mam sobie diva który ma jakąś szeerokośc np. width: 1000px bądź width: 100% i teraz w tym divie mam drugiego diva i chcę aby on mial width: 100% ale jeżeli ustawię mu margin np margin: 10px 10px to już on wyjdzie poza diva w którym się znajduje, czemu tak się dzieje i jak sobie z tym radzić ? Jeżeli tego diva ustawie za pomoca padding w divie nadrzędnym to już jest dobrze.

1 odpowiedź

odpowiedź 2 maja 2017 przez Magicone Nałogowiec (45,100 p.)

1. Piszą proponowane rozwiązania i podsumowują każde z nich. Wybierz i wykorzystaj jedną opcję.

2. Nie jak ognia, ale ze świadomością, że stylowanie po klasach to najlepsza i najbardziej rozsądna praktyka.

3. Trend? Jeśli już to powiedziałbym, że flex jest trendem. Anyway kierowanie się trendem do rozwiązania konkretnych problemów jest okropnie passe.

1. Tutaj masz kilka rozwiązań z opisem.

2. Słowo klucz: box-sizing.

komentarz 2 maja 2017 przez kevin Mądrala (5,010 p.)

flex ?

komentarz 2 maja 2017 przez Magicone Nałogowiec (45,100 p.)

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

komentarz 2 maja 2017 przez kevin Mądrala (5,010 p.)

Co do nadawania styli po id to jaki jest przeciwny argument ? Jestem początkujący i w końcu co float nie, inline-block też już nie ? Tylko flex ?

komentarz 2 maja 2017 przez Magicone Nałogowiec (45,100 p.)

Hmm, chociażby brak argumentów stylowania po [id] przemawia za użyciem klas. Pod hasłem "shall i style by id or class" znajdziesz mnóstwo artykułów co do tego tematu. To że jesteś początkujący nie zwalnia Cię z tego, aby czytać artykuły ze zrozumieniem. Użycie float wymaga kontroli elementów pływających przez użycie clearfix'a, czyli elementu ze stylem clear: both. Inline-block powoduje problemy ze spacjami pomiędzy elementami, łatanie tego jest średnio przejrzyste i przyjemne. Flexbox natomiast charakteryzuje się brakiem wsparcia wśród starych przeglądarek, ale tu postaw sobie pytanie - czy rzeczywiście potrzebujesz je wspierać?

komentarz 2 maja 2017 przez kevin Mądrala (5,010 p.)

Chyba na nie tą wersję kodu wstawiłem co była w linku, już poprawiłem. Co do flex, wątpię żeby wsparcie dla IE8 itp było mi potrzebne, ale skoro będzie mi to potrzebne tylko w 2 miejscach to nie widzę sensu żeby używać flex chyba że się mylę ?

Czyli liczenie marginesów odpada ? W sensie width: 100% - (margin-left + padding-left + 2*border-size + padding-right + margin-right);