Układ płynów CSS: margines-góra na podstawie procentu rośnie, gdy zwiększa się szerokość kontenera

Question

Po prostu uczę się układów płynnych CSS & responsywnego projektu i próbuję użyć wszystkich wartości procentowych bez wartości px w układzie.

Do tej pory wygląda na to, że działa, ale w jednym miejscu widzę coś, czego się nie spodziewałem. Próbuję umieścić margines między dwoma pionowo ułożonymi elementami div, które zmieniają się w zależności od wysokości kontenera. Spodziewam się, że margines ten zmieni się, gdy zmieniam rozmiar okna w pionie, ale rośnie on również, gdy zmienisz rozmiar w poziomie, czego nie chcę. czego mi brakuje?

Oto skrzypce. Dzięki za pomoc z góry.

http://jsfiddle.net/gregir/aP5kz/

Answer 1

W CSS, wszystkie cztery, a margines padding: procenty odnoszą się do szerokości... mimo że może wydawać się bezsensowne. Tak właśnie wygląda specyfikacja CSS, nic nie możesz z tym zrobić.

Czy możesz zrobić to, co chcesz, zamiast "ex" (lub "em")? W ten sposób jestem przyzwyczajony do określenia "płynnych" wartości marginesu/dopełnienia określonych ... i może to być mniej problematyczne niż wartości procentowe. (Chociaż nie mam odpowiedniego doświadczenia z pierwszej ręki, to bardzo długa precyzja obliczonych wartości procentowych ustawi Cię później na problemy z niezgodnością przeglądarki.) Mój styl polega na ograniczaniu procentów CSS do liczb całkowitych, jeśli wszystkie możliwe, lub czasami być może jedna, czasem nawet dwie cyfry po kropce dziesiętnej).

Jeśli naprawdę chcesz mieć dokładnie taką samą pustą przestrzeń pionową, która stanowi procent pojemnika, pierwszą rzeczą, która przychodzi mi do głowy jest oddzielnym pustym < div> ze specyfikacją CSS "height: nn%". A może coś, co określasz, obsługuje już rozmiary w pionie, jakie chcesz (ponieważ wyglądałoby na to, że marginesy nie zmieniają w ogóle rozmiaru pionowego).

Answer 2

Tak, jest to nieoczekiwane i sprzeczne z intuicją, ale działa jako zaprojektowanego & nie mam pojęcia, dlaczego to działa, jak to robi. Zobacz margin-top percentage does not change when window height decreases