Kedy použiť margin vs padding v CSS

“kontajner s triedou” margin-div “ a použite „ štýl ” atribút ako “ orámovanie: 1px plná čierna “. Potom pridajte nejaký text do „

Značka ”:

< div trieda = 'margin-div' štýl = 'okraj: 1px plná čierna' >
< p >Linuxhint je jedna z najlepších výukových webových stránok.< br >
< / p >
< div >

Výkon

Teraz použite vlastnosť „margin“ na triedu „.margin-div“:

.margin-div {
pozadie- farba : rgb ( 199 , 238 , 205 ) ;
font- veľkosť : stredná;
hranica : 3px rgb ( 114 , 250 , 114 ) ;
okraj: 100px 100px 100px 100px;
}

Vo vyššie uvedenom kóde je „ .margin-div ” sa používa na prístup k prvku div na použitie nižšie uvedených vlastností:

• “ farba pozadia ” vlastnosť sa používa na aplikovanie farby na pozadie.
• “ veľkosť písma “ sa používa na úpravu veľkosti písma.
• “ marža ” prideľuje priestor mimo prvku. Napríklad sme nastavili vlastnosť „margin“ ako „ 100 pixelov “.

Tu môžete vidieť, že sme úspešne nastavili „ marža “vlastnosť na druhom” div ' prvok:

Ako využiť „výplň“ v CSS?

Aby bolo možné použiť vlastnosť „padding“, použili sa vyššie uvedené príklady. V druhom „ div ”kontajner, použite triedu” padding-div “aplikujte výplň:

< div trieda = 'linux' >
< p > Linuxhint je jedna z najlepších výukových webových stránok < / p >
< / div >
< div trieda = 'padding-div' štýl = 'okraj: 1px plná čierna' >
< p >Linuxhint je jedna z najlepších výukových webových stránok.< br >
< / p >
< / div >

Výkon

Ak chcete použiť výplň a ďalšie vlastnosti CSS na „ .padding-div ” triedy, pozrite si poskytnutý kód:

.padding-div {
pozadie- farba : rgb ( 199 , 238 , 205 ) ;
font- veľkosť : stredná;
padding: 50px 50px 50px 50px;
}

Vo vyššie uvedenom kóde sme pristúpili k druhému „ div 'prvok používajúci triedu' .padding-div “. Nastavili sme „farbu pozadia“ a „veľkosť písma“. Navyše, „ vypchávka vlastnosť sa používa na pridanie priestoru okolo obsahu prvku z každej strany ako ' 50 pixelov “.

Výkon

Vysvetlili sme rozdiely a použitie „výplne“ a „okraja“ v CSS.

Záver

CSS ' marža “ sa používa na nastavenie rozostupu okolo prvku, zatiaľ čo „ vypchávka ” sa používa na pridanie medzier okolo obsahu prvku. Ak chcete použiť vlastnosť margin alebo padding, najprv vytvorte „ div ” kontajner a zadajte triedu. Potom prejdite do triedy podľa názvu triedy a použite „ marža “ a „ vypchávka vlastnosti. Tento príspevok vysvetlil použitie marginu vs padding v CSS.