A margók és a kitöltés elrendezése a CSS -ben. A behúzás szabályozása html -ben a css div külső behúzásain

A weblap elemeinek szebb megjelenítéséhez a css külső és belső behúzásait használjuk, és ezt most példákkal elemezzük.

Minden elem, legyen szó bekezdésről, div -ről, képről vagy videóról, egy blokk, amelyben a párnázó tulajdonsággal belül és kívül a margóval is behúzható.

A css -ben ezeket a tulajdonságokat behúzásra írják így (például egy bekezdés kerül):

A P címke helyett természetesen az elemét írod, amelyre a behúzás kerül alkalmazásra.

Ezt feltétlenül meg kell érteni és emlékezni margin paraméterekés a párnák párnázott felépítése mindkét oldalon azonos.
Vagyis minden behúzásnál 4 érték van:

Az értékek behúzása.

• Első jelentése: felső behúzás;
• Második jelentése: behúzás jobbra;
• Harmadik jelentés: alsó margó;
• Negyedik jelentése: bal behúzás.

Ebben a példában a külső párnázás margóját készítettem css -ben így: felül 20px -et, balra és jobbra 10px -et írtam (általában szimmetriára ugyanazok vannak írva), és alul jeleztem 30 képpont.

A belső párnázás párnázásához pedig megadtam: 10px felül, balra és jobbra, és 14px alul.

A margó és a párnázási tulajdonságok párnázásának értéke csökkenthető, feltéve, hogy azonos méretűek.
Példámból a rövidített jelölés már így fog kinézni:

Vagyis, ha az utolsó számbejegyzés hiányzik, ebben az esetben a bal behúzáshoz, akkor a böngésző automatikusan helyettesíti a bal oldali behúzást a jobb értékkel.
És az én esetemben a jobb és bal oldali behúzások egyenként 10px lesznek, ami a margóban van, ami a párnázásban van.

És ha ugyanazok az értékek vannak a felső és az alsó margóknál (például: 16 képpont), és ugyanazok az értékek a bal és jobb oldali külső margóknál (például: 20 képpont), akkor a rekord még rövidebb formája lesz:

Ennek megfelelően a belső css behúzásnál a bejegyzés azonos ezzel.

Egyetlen behúzás alkalmazása: minden oldalra külön -külön.

A következő egyértékű tulajdonságok külön behúzás megadására vonatkoznak:

Párnázási tulajdonságok mindkét oldalon.

• margin-top: 3 képpont; külső párnázás;
• margó-bal: 4 képpont; külső bal margó;
• margin-right: 6px; külső jobb margó;
• margin-bottom: 10 képpont; külső alsó párnázás.

A bejegyzések ugyanúgy vannak írva a belső párnázáshoz, csak ki kell cserélni a margót.

Például az img képekhez már rendelkezik minden behúzással a css -ben.

Vagyis (az egyértelműség kedvéért) a külső párnázás értékei a következők: felső 10 képpont, bal és jobb: egyenként 20 képpont, és alsó 14 képpont.
És a párnázás 6px mind a 4 oldalon.

Tegyük fel, hogy úgy döntött, hogy egy másik képet tesz fel az oldalra, de ehhez csak a külső margót szeretné megváltoztatni a tetején, a többit pedig hagyja. Ennek a feladatnak a végrehajtásához elegendő egy osztályt írni ehhez a képhez, és egy további bejegyzést hozzáadni a css -hez.

Ennek eredményeként a verx osztállyal hozzáadott kép elfogadja az img címke css -ben megadott összes behúzást, és csak a felső oldal margóját fogja megváltoztatni (esetünkben: 40 képpont).

Próbáltam részletesebbé tenni a css behúzás leírását, de ha bármilyen kérdése van, tegye fel őket a megjegyzésekben.

Leírás

Beállítja a párnázás mennyiségét az elem jobb szélétől. A párnázás az aktuális elem jobb szélének külső széle és a távolság közötti távolság belső határ szülőelemét (1. ábra).

Szintaxis

margin-right: érték | auto | örököl

Az értékek

A megfelelő kitöltés mennyisége megadható pixelben (px), százalékban (%) vagy más CSS -ben elfogadható mértékegységben. Az érték lehet pozitív vagy negatív.

Auto Azt jelzi, hogy a behúzások méretét a böngésző automatikusan kiszámítja. örököl Az érték öröklődik a szülőtől.

HTML5 CSS2.1 IE Cr Op Sa Fx

Ennek a példának az eredményét az ábra mutatja. 2.

Rizs. 2. A margin-right tulajdonság alkalmazása

Objektum modell

document.getElementById ("elemazonosító") .style.marginRight

Böngészők

Böngésző internet böngésző 6 megduplázza a szülőelemekbe ágyazott úszó elemek bal vagy jobb kitöltési értékét. A szülői oldal melletti párnázás megduplázódik. A problémát általában úgy oldják meg, hogy az úszó elemhez hozzáadjuk a display: inline -t.

Az Internet Explorer a 7.0 -ig bezárólag nem támogatja az öröklési értéket.

Előfordul, hogy egy elem vagy elrendezés létrehozásakor létre kell hoznunk egy vízszintes behúzást, hogy az egymáshoz viszonyítva legyen. Lehet blokk vagy különféle elemeket, vagy inkább úgy kell megtenni a távolságot, hogy kezdetben a vízszintes nézetben található blokkok között legyen beállítva. Létezik különböző utak a tervezési elemek behúzásának létrehozásáról. Azonban a többessel való kompatibilitás érdekében modern böngészők itt fogunk érinteni aktuális téma behúzással szövegként vagy blokkként az oldalon.

A tulajdonság határozza meg, hogy mennyi vízszintes szövegteret kell tekerni a szövegelem első sorának kezdete előtt. A távolságot az elejétől kezdve kell számítani az elem szélétől és a tartálytól a blokkszinthez.

Mivel egy weboldal tartalmának nagy része szövegként jelenik meg, a szöveg vonzó és hatékony stílusának kialakítása fontos készség, amely webdesignerként válhat. A leírás és a bekezdés behúzásához leggyakrabban használt és ajánlott módszer a CSS használata. Itt lesz biztosítva különféle példák hogyan használható a CSS szöveghez és behúzáshoz.

A felső margó beállítása a CSS -ben

A felső margók létrehozásához természetesen nem nélkülözhetjük a CSS-tulajdonságokat, ezért szükségünk van a margin-top-ra, ez az érték különböző módon állítható be, képpontban és szabványosan pixelekre, em,% és így tovább, hogy minden a CSS-stílusban történjen mértékegységekben.

Használati példa:

Margó-blokk (
margin-top: 50 képpont;
}

Amit megnézhet a képen:

Használhatja blokkok ejtésére is, akkor itt használhatja az ún margin-left is margin-rightés margin-bottom... Ahol egyszerűen megjelöljük a margin tulajdonságot, ahol lehetőség van kezdetben 4 paraméter beállítására, itt az óramutató járásával megegyező irányban mérlegeljük a koncepciót, ahol a felső oldalról indulunk, és mindkét oldal alatt folytatjuk.

margó: 20px 50px 30px 50px;

Ez így fog működni árrés: jobb felső bal alsó:

CSS -en felül párnázás is van

Előfordul, hogy egy tartalomelemet függőlegesen kell igazítani, ez a szülőblokkhoz viszonyítva, itt lehetőség van más tulajdonságok használatára is, mint például a padding-top, amely alapértelmezés szerint felfelé állítja a kitöltést. Ha hasonló tulajdonságokról beszélünk, amelyeket analógia útján is lehet írni és beállítani, akkor itt jön a margó px, em,% és egyéb egységekben.

Példa:

Párnázó blokk (
párnázott felső: 47 képpont;
}

Nézzünk egy példát:

Most megfontolhatjuk az ingatlan analógját árrésés párnázás, amely a blokk elem másik oldalán lévő behúzások beállítására szolgál, de már külön megy: párnázás-bal, párnázás-jobb, padding-bottom... Ahol azonnal beállíthatja a szükséges távolságot, csak minden oldalra, és minden egyszerre lesz.

párnázás: 10px 20px 40px 50px;

Itt kezdetben beállíthatja az értéket árrés kezdve, ahogy felülről érted, de aztán minden az óramutató járásával megegyező irányba halad, jobbra, alulra, balra, stb.

Most, a különböző helyzettől függően, lehetősége van arra, hogy a CSS stílusok tetején behúzásokat készítsen, ahol a tulajdonságokat használjuk árrésés párnázás hogy lehetséges a szükséges elemek elhelyezése az internetes erőforrás oldalán, ahogy elképzelte és meg kell tennie.

Helló! Kezdetben 4 kis részre akartam osztani ezt a cikket, de aztán elgondolkodtam. Minek? Végül is kényelmesebb, ha az ilyen információkat egyetlen anyag keretében gyűjtik.

Ezért ma megtanuljuk, hogyan kell csinálni CSS behúzás bal és minden más oldal - jobb, felül és alul. Megtehetők képekhez és szövegekhez. Ezek két típusból állnak:

• Külső;
• Belső.

Az elsőnél a kulcstulajdonságot használják, a másodiknál ​​a kitöltést. Az érthetőség kedvéért egy kis példát hoztam nektek. Annak érdekében, hogy vizuálisan kényelmes legyen megkülönböztetni a belső és a külső teret, hozzáadtam egy látható táblázatot. Nézzük meg mi történt?

Külső párnázás

Ha regisztrálja őket a CSS stílusfájlba, beállíthatja az információs blokk tájolását az oldalon. Például mozgassa balra és lefelé. Azonnal mutassuk be, hogyan fog kinézni.

A behúzások beállításához általában a következő lehetőségeket használhatja.

Bal (margó-bal).

Jobb (margó-jobb).

Felső (margin-top).

Alul (margó-alsó).

Most mutatok egy másik finom árnyalatot.

Amint láthatja, használhatja az egyik lehetőséget - a hatás ugyanaz. Csak a második esetben a kód tömörebb. Vegye figyelembe azt is, hogy a párnázás az óramutató járásával megegyező irányban történik. Minden a tetején kezdődik és a bal oldalon ér véget.

Belső párnázás

Az eljárás itt is hasonló. Csak most nem a teljes táblázathoz, hanem az oszlopok tartalmához adok hozzá új tulajdonságokat.

Lássuk, mi sült ki belőle.

Hasonló a párnázáshoz CSS külsőírható rövid kódban vagy külön a feleknek.

Ezek voltak a fénypontok. Végezetül megmutatom, hogyan könnyítheti meg néhány munkáját.

Behúzás a kiválasztott címkék szintjén

Azokban az esetekben, amelyeket fentebb megvizsgáltunk, egyszerre szövegekre és képekre vannak beállítva. Valójában az elemek távolságát egy adott címke szintjén állíthatja be. Megmutatom, hogyan működik. Megszünteti utolsó változásokés jelezze speciális kód a stíluslapban.

Nézzük meg, mi történt a módosítások mentése után.

A kép a helyén maradt, csak a bal oldali szöveg mozdult meg. Hasonló manipulációk alkalmazhatók más blokkokra is, például tr, span.

Mint további információ Kiadványt javaslok felülvizsgálatra. Van elég leírt is érdekes módokat... Hasznos lehet piros vonal kialakításához a szövegben, vagy egyéb műveletek végrehajtásához.

Ezenkívül feliratkozik az ingyenes hírlevélre, amelyen információkat talál email címek... Feliratkozni a blogra ott van különleges forma... A következő alkalomig.

A webes erőforrást a felhasználók vizuális vonzereje alapján értékelik. Ezért előfordulhat, hogy még az információ szempontjából is hasznos szöveget nem lehet elolvasni, mivel rosszul formázott. Következtetés - gondosan és körültekintően kell megközelíteni nemcsak a webhely oldalainak szemantikai tartalmát, hanem a vizuális megjelenítését is. A CSS technológia megjelenése kibővítette a vonzó cikkek létrehozásának lehetőségeit. Az egyik tulajdonság, amely megkönnyíti az írottak megértését, a behúzás. CSS szöveg.

Margó és párnázás: mi a különbség?

Mielőtt elkezdené a szöveg formázását, meg kell értenie, hogy melyek a margók és a behúzások. Annak ellenére, hogy ezek a jelölő elemek bizonyos esetekben ugyanúgy néznek ki a felhasználó számára, alapvető különbségek vannak közöttük:

• a mezőt a tulajdonság állítja be párnázás, behúzás - árrés;
• a margót a blokk tartalma és határa közötti rés határozza meg, a behúzás a szomszédos blokkok határai között van;
• a margókat figyelembe lehet venni az elem méreteiben (szélesség és magasság), vagy sem.

Margó tulajdonság

Tehát a CSS szöveg vízszintes vagy függőleges behúzásának beállításához használja a konstrukciót árrés... Ez a tulajdonság a címkére vonatkozik bekezdés meghatározó dokumentumának. A legegyszerűbb esetben ezt írják:

margó: 12 képpont.

Ez a sor azt jelenti, hogy a szövegblokk (vagy bármely más blokk) körül 12 képpontos behúzás készül minden oldalon. Például az időköz háromszorosának növeléséhez elegendő írni:

margó: 36 képpont.

De mi van akkor, ha a blokkok közötti távolságnak mindkét oldalon eltérőnek kell lennie? A webfejlesztők többféle írásmódot használnak:

1. margó: 11px 22px.
2. margó: 11px 22px 33px.
3. margó: 11px 22px 33px 44px.

Az első példában 11 pixel lesz a blokk alsó és felső szegélyétől, 22 pixel pedig a blokk oldalaitól. A második jelölési forma szerint a blokk felső széle és a tartalom között 11, az alsó széle között 33, az oldalakon 22 pixel lesz. A harmadik esetben a párnázás felülről 11, jobbról 22, alulról 33, balról 44 pixel lesz.

Lehetőség van arra is, hogy a blokkhatárig tartó távolságot csak az egyik oldalon rögzítsük: margin-top, margin-bottom, margin-left, margin-right... Miután lefordította az ingatlanok nevét oroszra, könnyű kitalálni a céljukat. Például a következő bejegyzés szerint a jobb oldali behúzás 22 képpont lesz:

margó-jobb: 22 képpont.

A többi oldal esetében a blokk körüli távolságokat a szülőelem értékével egyenlőnek vesszük.

Ingatlan árrés van egy furcsasága, amelyet a fejlesztőnek emlékeznie kell a CSS szöveg függőleges behúzásának használatakor. Időközök szomszédos elemek nem összegezve, hanem egymásra helyezve. Például legyen az egyik blokk alsó margó: 15 képpont, és a mellette lévő tömböt alulról margin-top: 35 képpont... Az iskolai számtan és a józan ész azt diktálja, hogy a köztük lévő teljes tér 50 pixel lesz. A gyakorlatban ez nem így van. Blokkolja a gombbal kitűnő érték tulajdonságait árrés"Nyeli" a szomszédját. Ennek eredményeként az elemek közötti távolság 35 pixel lesz.

"Piros vonal

Dokumentum készítése szöveg szerkesztő, a felhasználók inkább minden új bekezdést "piros" vonallal határoznak meg. VAL VEL CSS használatával nem nehéz balra behúzni a szöveget - a konstrukciót használják szöveg-behúzás... Így van írva:

szöveg-behúzás: 11 képpont.

Vagyis a bekezdés első sora 11 képponttal eltolódik a bal szélhez képest. Ahhoz, hogy a weboldalon megjelenő szöveg inkább a dokumentum szerkesztőjéhez hasonlóvá váljon, telepítenie kell, azaz írnia kell:

szöveg-behúzás: 11 képpont;

text-align: igazol.

A képpontok mellett a jelölés leírásakor más egységek - hüvelyk, pont, százalék - használata is megengedett. Legyen a blokk CSS szövegpárnázata 10%. 500 képpontos blokk szélesség esetén a piros vonal 50 képpont lesz (az 500% 10% -a).

Ez a tulajdonság beállítható örököl... Egy ilyen bejegyzés azt mondja, hogy a blokk a szülőblokk hasonló tulajdonságát használja.

text-indent: örököl.

Meglepő módon negatív értékeket is felvehet! Ebben az esetben az úgynevezett kiemelkedések keletkeznek, vagyis a fő szöveg a helyén marad, és az első sort 22 képponttal balra tolja:

szöveg -behúzás: -22 képpont.

Annak érdekében, hogy a betűk ne léphessék át a böngésző bal határát szöveg-behúzás a mező beállításához a konstrukciót kell használnia:

párnázás-bal: 22 képpont.

A fő CSS tulajdonságok felülvizsgálatra. A gyakorlat segít megszilárdítani őket. Íme néhány utolsó tipp, hogyan alkalmazhatja ezt az anyagot webhelye fejlesztéséhez:

• a piros vonal és a szöveg behúzása különböző fogalmak, és különböző tulajdonságokkal jelzik őket;
• függőleges behúzásokra a matematika szabályai nem érvényesek - az intervallumok egymásra vannak helyezve, a nagy értékű elem "nyer";
• a negatív bekezdés behúzása a bekezdés első sorának jelzésére szolgál kép használatával.