Miért mozdul lefelé a DIV-em?
A lenti kódban azt szertém elérni, hogy létrehozzak egy DIV elemet, ami a képernyő tetejétől és oldalaitól kb azonos távolságban van és a képernyő 85%-át foglalja el. Ez sikerült is, öröm boldogság!
Viszont mihelyt beletettem a <h1> elemet az egész lejjebb mozdul és nem értem, hogy miért. Ha a div-be beleteszek egy <table> -t és abba teszem bele a <h1>-et akkor úgy viselkedik ahogy szeretném.
Habár úgy tűnik, hogy a problémát sikerült kezelnem azért szeretném megérteni, hogy miért viselkedik egyik esetben így a másik esetben úgy az oldal.
Köszönöm a segítséget.
válasza: válasza:Nagyon sokat segít, ha megnézed a böngésződben is a kódot.
Kattints jobb egérgombbal a szövegre, majd ott a vizsgálat-ra.
Jobb oldalt megjelenik a kód és ábrák. A következő ábrát keresd: színes téglalapok vannak rajta. Ott látod a padding-ot, border-t és margin-t.
A te esetedben a margin 18 volt.
Igen, ezt értem, hogy a h1 margója a ludas, mert ha pl a h1 helyett csak sima szöveget írok ki akkor ismét a "helyére" ugrik a dolog.
Az nem világos, hogy miért kell még egy táblázatot is beletegyek. Azt hittem, hogy a DIV már egy fix valami és ehhez képest lesz margója a <h1>-nek, vagyis hogy nem a DIV hanem a h1 fog mozdulni.
válasza:Nem felesleges mert ha nem rakok táblázatot akkor mozdul a keret is. Ez az alapprobléma amit leírtam a kérdésemben.
Persze ha leveszem a h1 margóját, akkor nem mozdul de akkor a szöveg teljesen hozzácuppan a div tetejéhez, ami elég gagyin néz ki.
válasza:Azért használj padding-et.
div h1 {
margin: 0;
padding: 15px;
}
Vagy padding-top ha azt akarod, hogy csak a tetejétől legyen üres hely.
Ha meg azt akarod, hogy a tetejétől és aljától, akkor:
padding: 15px 0;
válasza:div h1 { //a "div h1" az összes divben lévő összes h1-re érvényes
margin: 0; //margót 0-ra állítod, szóval nem fogja a div-et mozdítani
padding: 15px; // A szöveg köré 15px-es "üres helyet" hagy
float: left; //ez a parancs balra igazítja a szöveget.
}
válasza:Ez kicsit olyan mintha odahányták volna, ezért leírom mégegyszer kommentek nélkül:
div h1 {
margin: 0;
padding: 15px;
float: left;
}
válasza:Szia!
A margin-top a gond, ha csak lehet ne használd block szintű elemnél.
* { margin-top:0; }
Kapcsolódó kérdések:
Minden jog fenntartva © 2025, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!