Využij akce až 30 % zdarma při nákupu e-learningu. Více informací. Zároveň je tento týden sleva až 80 % na e-learning týkající se C# .NET
Hledáme nového kolegu do redakce - 100% home office, 100% flexibilní pracovní doba. Více informací.
discount week 30 halloween

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

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
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
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.