margin css niestety przesuwa wszystko

pytanie zadane 3 lipca 2021 w HTML i CSS przez Doge Gaduła (3,370 p.)

Witam, mam następujący kod:

{HTML}

<!DOCTYPE HTML>
<html lang="pl">
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
	<link rel="stylesheet" href="style.css">
	<script type="text/javascript" src="script.js"></script>
</head>
<body>
	<div id="container">
		<div id="resources">
			<div id="coins">
				<span id="coin">coins</span>
			</div>
		</div>
	</div>
</body>
</html>

{CSS}

body
{
	background-image: url("img/body_background.jpg");
}
#container
{
	width: 1200px;
	margin-left: auto;
	margin-right: auto;
	min-height: 500px;
	background-color: red;
}
#resources
{
	background: linear-gradient(45deg, #e66465, #9198e5);
	text-align: center;
	font-size: 40px;
	min-height: 200px;
	width: 100%;
}
#coins
{
	height: 100px;
	width: 50%;
	border: 3px solid black;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px; /* tutaj ustawiam margin */
}
#coin::before
{
	content: "";
	background-image:url(img/coin.png);
	background-size: 100% 100%;
	display: inline-block;
	
	/*rozmiar ::before background*/
	height: 50px;
	width: 50px;
	
	position: relative;
	top: 15px;
}

i niestety kiedy ustawiam margin-top dla diva #coins, przesuwa się cały div #container. Dlaczego tak się dzieje?

2 odpowiedzi

odpowiedź 3 lipca 2021 przez ScriptyChris Mędrzec (190,190 p.)
wybrane 3 lipca 2021 przez Doge

Najlepsza

Hmm, wygląda mi na margin collapsing parenta względem potomków w przypadku braku treści pomiędzy nimi. Naprawić to możesz np. nadając elementowi #resources (lepiej zrobić to poprzez klasę w CSS niż ID) pionowy padding 1px.

komentarz 3 lipca 2021 przez Doge Gaduła (3,370 p.)

Bardzo dziękuję, teraz działa. A czy to robi się za każdym razem, kiedy nie dodam paddingu?

komentarz 3 lipca 2021 przez Doge Gaduła (3,370 p.)

@ScriptyChris,
I też dlaczego lepiej jest to zrobić przez klasę?

komentarz 3 lipca 2021 przez ScriptyChris Mędrzec (190,190 p.)

A czy to robi się za każdym razem, kiedy nie dodam paddingu?

Nie tylko. Poczytaj o margin collapsing w podlinkowanej dokumentacji.

I też dlaczego lepiej jest to zrobić przez klasę?

Ponieważ stylowanie po id w CSS robi więcej szkody niż pożytku.

https://forum.pasja-informatyki.pl/109776/html-class-czy-id?show=109816#a109816

odpowiedź 4 lipca 2021 przez VBService Ekspert (252,740 p.)
edycja 4 lipca 2021 przez VBService

Dokładnie jak napisał @ScriptyChris, efektu margin collapsing parent, można także pozbyć się m. in.

przez dodanie do parent-a elementu, border ustawiony na 1px.

<div class="container">
    <div class="parent">
        <div class="child"></div>
        <button>border</button>
    </div>
    <button>border</button>
</div>

div button {
  margin: 1em;
  cursor: pointer;
}
.container {
  width: 300px;
  height: 400px;
  background: #eee;
  border: 1px solid transparent;
}
.parent {
  border: 1px solid transparent;
  width: 275px;
  height: 300px;
  margin: 20px auto;
  background: #bbb;
}
.child {  
  width: 250px;
  height: 200px;
  margin: 20px auto;
  background: #777;
}
.border-zero {
  border: 0;
}

dla demonstracji

[...document.querySelectorAll('button')].forEach((button) => {
  button.addEventListener('click', ({target}) => {
    target.parentNode.classList.toggle('border-zero');
    target.textContent = getStyle(target.parentNode);
  });

  button.click();
});

function getStyle(obj, style='border') {
  return window.getComputedStyle(obj).getPropertyValue(style);
}

komentarz 4 lipca 2021 przez VBService Ekspert (252,740 p.)
edycja 4 lipca 2021 przez VBService

Lub przez dodanie do "kontenera": display: grid;

<div class="container">
    <div class="parent">
        <div class="child"></div>
    </div>
</div>

.container {
  display: grid;
  width: 300px;
  height: 400px;
  background: #eee;
}
.parent {
  width: 275px;
  height: 300px;
  margin: 20px auto;
  background: #bbb;
}
.child {  
  width: 250px;
  height: 200px;
  margin: 20px auto;
  background: #777;
}

dla demonstracji

<div class="container">
  <div class="parent">
    <div class="child"></div>

    <input type="range" list="margin" min="0" max="50" value="20" step="1">
  </div>

  <input type="range" list="margin" min="0" max="50" value="20" step="1">
</div>

<datalist id="margin">
  <option value="0"></option>
  <option value="10"></option>
  <option value="20"></option>
  <option value="30"></option>
  <option value="40"></option>
  <option value="50"></option>
</datalist>

.container {
  display: grid;
  width: 300px;
  height: 400px;
  background: #eee;
}
.parent {
  width: 275px;
  height: 300px;
  margin: 20px auto;
  background: #bbb;
}
.child {  
  width: 250px;
  height: 200px;
  margin: 20px auto;
  background: #777;
}
input[type="range"] {
  width: 10em;
  margin: 1em;
}

[...document.querySelectorAll('input[type="range"]')].forEach((range) => {
  range.addEventListener('input', ({target}) => {
    target.parentNode.firstElementChild.style.marginTop = target.value + 'px';
  });
});