Java týden Java týden
Aprílový black friday tě nenechá v klidu! Až 80 % prémiového obsahu zdarma. Více informací
Pouze tento týden slevy až 80 % na programování v Javě

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

HTML a CSS HTML a CSS Margin-top pushuje všetok content nad sebou namiesto jedného elementu American English version English version

Aktivity (1)
Avatar
gold604
Člen
Avatar
gold604: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 gold604
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  +1 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
gold604
Člen
Avatar
Odpovídá na Peter Mlich
gold604: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.