Rozmieszczenie divów za pomocą marginesów

0

Witam.

W czasie nauki css robiłem i wymyślałem przykłady by lepiej zrozumieć technologię html i css. Podczas rozwiązywania następującego przykładu:

<!DOCTYPE html>
<html lang="pl">
	<head>
		<title>Marginesy</title>
		<style>
			#id1 {
				margin-left: auto;
				margin-right: auto;
				width: 500px;
				height: 200px;
				background-color: yellow;
			}
			#id2 {
				margin-left: 100px;
				margin-right: 50px;
				margin-top: 75px;
				height: 100px;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div id="id1">
			<div id="id2">
			</div>
		</div>
	</body>
</html>

natrafiłem na problem, którego nie potrafię zrozumieć. Otóż ustawiając margin-top dla wewnętrznego czerwonego diva, sądziłem, że przesunie się on wewnątrz żółtego, jednak tak się nie stało i ustawienie margin-top dla diva z id2 przesuwa zewnętrznego diva o id1. W związku z problemem mam 2 pytania:

1 czemu przesuwa się div id1 zamiast div id2?
2 jak zrobić by przesunąc tylko div id2?

1

Marginesy wewnętrzne robi się za pomocą padding.

1

i polecam zrobic plik style.css. Wpisz sobie w youtube i zakumasz o co kaman

1

To jest tzw. margin collapse. Ogólne znaczenie marginesu to nie jest "przesuń ten element o 75px" tylko bardziej "musi być 75px wolnego miejsca nad tym elementem".

user image

W Twoim przykładzie jeden div dosłownie nachodzi na drugi, więc przeglądarka to interpretuje w ten sposób ponieważ liczy margines nie od div'a, który jest rodzicem ale od elementu nad nim (w tym przypadku body - okna przglądarki). Div zewnętrzny nie jest traktowany jako "przeszkoda" ponieważ leżą jeden na drugim.

Jeżeli przesuniesz div wewnętrzny np. o 1 px od górnej ściany zółtego diva (przykład nr 2 w demo) i zostawisz margin to wtedy zostanie to uwzględnione, bo najbliższą przeszkodą będzie div zewnętrzny.

Można to rozwiązać w prosty sposób, albo dodając overflow:auto; do diva zółtego lub - lepszy sposób - użyć właściwości padding na divie zółtym. Krótko mówiąc margin służy do odstępów zewnętrznych, a jeżeli chcesz stworzyć tak jak tutaj odstęp wewnątrz to użyj padding-top. Nie przjemuj się z czasem załapiesz :)

Tutaj masz demo. Jak wrzucasz coś na forum postaraj się wklejać kod do jsfiddle, ułatwi Ci to otrzymanie pomocy :)
https://jsfiddle.net/kg916yhq/4/

0
Fi3rce napisał(a):

W Twoim przykładzie jeden div dosłownie nachodzi na drugi, więc przeglądarka to interpretuje w ten sposób ponieważ liczy margines nie od div'a, który jest rodzicem ale od elementu nad nim (w tym przypadku body - okna przglądarki). Div zewnętrzny nie jest traktowany jako "przeszkoda" ponieważ leżą jeden na drugim.
Dziękuje za wyjaśnienie dużo mi pomogłeś, jednak nowa wiedza zrodziła następne pytania.

Piszesz, że margines liczy się od przeszkody i jestem te wyjaśnienie przyjąć. Teraz tylko kiedy dany element jest przeszkodą a kiedy nie? Sprawdziłem i tak jak pisałeś: div z padding jest przeszkodą, tak samo jak div z border, zastosowanie właściwości overflow też tworzy tą przeszkodę choć w w3school o tym nie piszą.

0

Ok dzięki wskazaniu mi, zagadnienia, które odpowiada za moje błędy znalazłem dokładną odpowiedź na nurtujące mnie pytania. Jeśli ktoś z przyszłości będzie miał ten sam problem to radzę zajrzeć
tu: kurshtml.pl
i tu: browsehappy.pl

Prosiłbym o zamknięcie tematu i oznaczenie go jako rozwiązanego, przy okazji prosiłbym moderatora by dał łapkę w górę użytkownikowi Fi3rce za największy wkład w rozwiązanie problemu.

1 użytkowników online, w tym zalogowanych: 0, gości: 1