NOVINKA: Získej 40 hodin praktických dovedností s AI – ZDARMA ke každému akreditovanému kurzu!
S účinností od 26. 3. jsme aktualizovali Zásady zpracování osobních údajů – doplnili jsme informace o monitorování telefonických hovorů se zájemci o studium. Ostatní části zůstávají beze změn.

Diskuze: Margin-top pushuje všetok content nad sebou namiesto jedného elementu

V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity
Avatar

Člen
Avatar
:9.7.2018 14:22

Ahojte,
mám dva elementy: input a div, ktoré majú nastavený display na inline-block. Keď na dive nastavím margin-top tak namiesto toho, aby sa posunul ten div, posunie content nad sebou. Keď nastavím obom elementom float tak to funguje.
Našiel by sa tu aj iný spôsob pri ktorom by som nemusel použiť floaty?

Ďakujem.

Jsfiddle

 
Odpovědět
9.7.2018 14:22
Avatar
Ota Vlna
Člen
Avatar
Odpovídá na
Ota Vlna:9.7.2018 15:06

Místo marginu bys mohl divu nastavit relativní pozici a potom ho posunout pomocí vlastnosti "top"

body { margin: 0; }

input, div { display: inline-block; }

div {
  width: 10px;
  height: 10px;
  background: #000;
  position: relative;
  top: 20px;
}
 
Nahoru Odpovědět
9.7.2018 15:06
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:11.7.2018 15:12

'posunie content nad sebou'
Nedal jsi kod. Lze jen tipovat. Je asi 100 moznosti.
Ano, takhle se obvykle margin chova, vyteka do jinych elementu.

Moznosti pro ten element nebo ten, ve kterem je uzavren:
position:rela­tive/absolute, padding, display:inline-block, border, display:table, table-row, ...

 
Nahoru Odpovědět
11.7.2018 15:12
Avatar

Člen
Avatar
Odpovídá na Peter Mlich
:11.7.2018 16:12

Peter, keby si sa pozrel poriadne tak by si našiel na konci link na jsfiddle. Paddingy, floaty, display inline-block a position relative som skúšal... Nakoniec mi najviac vyhovoval vertical-align. :)

Akceptované řešení
+5 Zkušeností
Řešení problému
 
Nahoru Odpovědět
11.7.2018 16:12
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:12.7.2018 8:35

Aj, tak sorry. Maji tu spatny skin na linky, stava se mi to :)

Aha, takze, podle kodu vetsina z toho by ti nepomohla.
Ano, vertical-align by se dal pouzit, ale ma to sva omezeni.
Lepsi mozna position:relative a pouzit pak top. (kod navic si nevsimej)

<div><input type="text"><div></div></div>
<style>
div { position:relative; }
div input, div div { display: inline-block; }
div div {top:20px;}

div div {
  width: 10px;
  height: 10px;
  background: #000;
  margin-top: 20px;
}
</style>
 
Nahoru Odpovědět
12.7.2018 8:35
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 5 zpráv z 5.