Black Friday je tu! Využij jedinečnou příležitost a získej až 80 % znalostí navíc zdarma! Více zde
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.
BF extended 2022

margin - Český CSS 3 manuál

Pomocí CSS 3 vlastnosti margin nastavujeme okraj elementu, tedy vzdálenost mezi rámečkem a okolím elementu.

Margin je spolu s vlastnostmi border a padding součástí tzv. box modelu (občas překládáno jako "krabičkový model").

Box model v CSS pro HTML element

Box model znázorňuje pozici těchto 3 vlastností okolo obsahu HTML elementu. Můžeme nastavovat okraje mezi rámečkem a okolím nebo obsahem elementu a rámečkem.

Ani jeden okraj se nepočítá do velikosti elementu. Pokud tedy nastavíme margin na 10px, border na 5px a padding na 10px na elementu s šířkou 100px, bude jeho výsledná šířka 150px.

Margin nastaví všechny 4 okraje (levý margin, pravý margin, dolní margin a horní margin) na stejnou velikost. Pokud chceme mít každý okraj jiný, můžeme použít tyto vlastnosti:

Ukázka ostylování okraje elementu

<!DOCTYPE html>
<html>
    <head>
        <style>
        #kontejner
        {
            border: 1px solid blue;
            background-color: #BDBDF8;
            margin: 40px;
            padding: 20px;
            width: 300px;
            height: 100px;
        }
    </style>
    </head>
    <body>
        <div id="kontejner">
            Mezi rámečkem a okolím je okraj 40px a mezi tímto textem a rámečkem je okraj 20px. Pozadí se vykresluje až k rámečku.
        </div>
    </body>
</html>

Výsledek:

Ukázka ostylování okrajů okolo elementu v CSS

 

Všetky články v sekcii
Okraje (margin a padding) - CSS vlastnosti
Článok pre vás napísal David Čápka
Avatar
David je zakladatelem ITnetwork a programování se profesionálně věnuje 13 let. Má rád Nirvanu, nemovitosti a svobodu podnikání.
Unicorn university David sa informačné technológie naučil na Unicorn University - prestížnej súkromnej vysokej škole IT a ekonómie.
Aktivity

 

 

Komentáre

Avatar
nasosak
Nevyplnené
Avatar
nasosak:22.9.2013 11:56

"Ani jeden okraj se nepočítá do velikosti elementu. Pokud tedy nastavíme margin na 10px, border na 5px a padding na 10px na elementu s šířkou 100px, bude jeho výsledná šířka 130px."

Neviem ci tomu zle rozumiem alebo je to v tom texte z článku zle spočítané. Mne to vychádza na 150px. (lavý margin 10 + lavý border 5 + lavý padding 10 + element 100 + pravý padding 10 + pravý border 5 + pravý margin 10 = 150px šírka celého elementu

 
Odpovedať
22.9.2013 11:56
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovedá na nasosak
David Čápka:22.9.2013 11:57

Máš pravdu, díky, opravím. Asi jsem tam neměl padding a pak jsem ho přidal :)

Odpovedať
22.9.2013 11:57
One of the most common causes of failure is the habit of quitting when one is overtaken by temporary defeat.
Avatar
nasosak
Nevyplnené
Avatar
Odpovedá na David Čápka
nasosak:22.9.2013 17:58

Fajn, som rád, že si mal chybu ty a ja som to pochopil správne.:P

 
Odpovedať
22.9.2013 17:58
Avatar
Alexej Haman
Člen
Avatar
Alexej Haman:17.6.2016 18:03

Nechybí zde margin: "nějaká hodnota" auto; ? Možná to je uvedené jinde a ještě jsem se k tomu nedostal. Jen se ptám. :)

 
Odpovedať
17.6.2016 18:03
Avatar
Odpovedá na Alexej Haman
Neaktivní uživatel:17.6.2016 18:08

Ano chybí, to je poměrně důležitá věc

Odpovedať
17.6.2016 18:08
Neaktivní uživatelský účet
Robíme čo je v našich silách, aby bola tunajšia diskusia čo najkvalitnejšia. Preto do nej tiež môžu prispievať len registrovaní členovia. Pre zapojenie sa do diskusie sa zaloguj. Ak ešte nemáš účet, zaregistruj sa, je to zadarmo.

Zobrazené 5 správy z 5.