Kdy použít okraj vs odsazení v CSS

'kontejner s třídou' margin-div “ a použijte „ styl ” atribut jako “ ohraničení: 1px plná černá “. Poté přidejte nějaký text do „

značka ”:

< div třída = 'margin-div' styl = 'ohraničení: 1px plná černá' >
< p >Linuxhint je jeden z nejlepších výukových webů.< br >
< / p >
< div >

Výstup

Nyní použijte vlastnost „margin“ na třídu „.margin-div“:

.margin-div {
Pozadí- barva : rgb ( 199 , 238 , 205 ) ;
písmo- velikost : střední;
okraj : 3px rgb ( 114 , 250 , 114 ) ;
okraj: 100px 100px 100px 100px;
}

Ve výše uvedeném kódu je „ .margin-div ” se používá pro přístup k prvku div k použití níže uvedených vlastností:

• “ barva pozadí ” vlastnost se používá k aplikaci barvy na pozadí.
• “ velikost písma ” se používá k úpravě velikosti písma.
• “ okraj ” přiděluje prostor vně prvku. Například jsme nastavili vlastnost „margin“ jako „ 100 pixelů “.

Zde můžete vidět, že jsme úspěšně nastavili „ okraj ' nemovitost na druhém ' div prvek:

Jak využít „výplň“ v CSS?

Aby bylo možné použít vlastnost „padding“, byly použity výše uvedené příklady. Ve druhém „ div ”kontejner, použijte třídu” padding-div ” pro použití výplně:

< div třída = 'linux' >
< p > Linuxhint je jeden z nejlepších výukových webů < / p >
< / div >
< div třída = 'padding-div' styl = 'ohraničení: 1px plná černá' >
< p >Linuxhint je jeden z nejlepších výukových webů.< br >
< / p >
< / div >

Výstup

Chcete-li použít odsazení a další vlastnosti CSS na „ .padding-div ” třídy, podívejte se na poskytnutý kód:

.padding-div {
Pozadí- barva : rgb ( 199 , 238 , 205 ) ;
písmo- velikost : střední;
padding: 50px 50px 50px 50px;
}

Ve výše uvedeném kódu jsme přistoupili k druhému „ div 'prvek používající třídu' .padding-div “. Nastavili jsme „barvu pozadí“ a „velikost písma“. Navíc, „ vycpávka vlastnost se používá k přidání prostoru kolem obsahu prvku z každé strany jako ' 50 pixelů “.

Výstup

Vysvětlili jsme rozdíly a použití „vycpávek“ a „marže“ v CSS.

Závěr

CSS' okraj “ se používá k nastavení rozestupu kolem prvku, zatímco “ vycpávka ” se používá k přidání mezer kolem obsahu prvku. Chcete-li použít vlastnost margin nebo padding, nejprve vytvořte „ div ” kontejner a zadejte třídu. Poté přistupte ke třídě podle názvu třídy a použijte „ okraj ' a ' vycpávka vlastnosti. Tento příspěvek vysvětlil použití margin vs padding v CSS.