Dit bericht beschrijft:
- Wanneer gebruik je 'opvulling' versus 'marge' in CSS?
- Hoe 'marge' in CSS te gebruiken?
- Hoe gebruik je 'padding' in CSS?
Wanneer gebruik je 'opvulling' versus 'marge' in CSS?
CSS ' marge ' en ' opvulling ” eigenschappen worden gebruikt om de interface te ontwerpen. Ze worden ook gebruikt om de extra opening of ruimte tussen elementen te specificeren. Deze twee eigenschappen verschillen echter qua functionaliteit van elkaar.
Hier zullen we enkele verschillen tussen beide eigenschappen uitleggen:
| marge | opvulling |
|---|---|
| marge biedt ruimte buiten het element. | opvulling biedt ruimte binnen de inhoud van het element. |
| We kunnen een elementmarge instellen als ' auto ” om automatisch de marge rond het element in te stellen. | opvulling kan niet worden ingesteld als automatisch. De gebruiker moet de waarden specificeren om de ruimte binnen het element in te stellen. |
| De marge heeft geen invloed gehad op de stijl van een element. | Wanneer we achtergrondkleur toepassen op het element, heeft dit invloed op de vormgeving van een element. |
| We kunnen zowel positieve als negatieve waarden als marges instellen. | padding ondersteunt alleen positieve waarden. |
Hoe 'marge' in CSS te gebruiken?
Gebruik maken van de “ marge ” eigenschap, maak eerst een “ Het resultaat van de bovengenoemde code wordt hieronder vermeld: Maak nu nog een ' Uitgang Pas nu de eigenschap 'marge' toe op de klasse '.margin-div': In de bovenstaande code, de ' .marge-div ”wordt gebruikt voor toegang tot het div-element om onderstaande eigenschappen toe te passen: Hier kunt u zien dat we met succes de ' marge ” woning op de tweede “ div ”-element: Om de eigenschap 'padding' te gebruiken, zijn de bovengenoemde voorbeelden gebruikt. In de seconde ' div ” container, gebruik de klasse “ opvulling-div ” om opvulling toe te passen: Uitgang Opvulling en andere CSS-eigenschappen toepassen op de ' .padding-div ” klasse, kijk eens naar de verstrekte code: In bovengenoemde code hebben we toegang gekregen tot de tweede ' div 'element met behulp van klasse' .padding-div ”. We hebben de “achtergrondkleur” en “lettertypegrootte” ingesteld. Bovendien is de “ opvulling ” eigenschap wordt gebruikt om vanaf elke kant ruimte rond de elementinhoud toe te voegen als “ 50px ”. Uitgang We hebben de verschillen en het gebruik van 'opvulling' en 'marge' in CSS uitgelegd. De CSS “ marge ” wordt gebruikt om de afstand rond het element in te stellen, terwijl de “ opvulling ” wordt gebruikt om ruimte rond de elementinhoud toe te voegen. Om marge- of opvuleigenschappen toe te passen, maakt u eerst een ' div ” container en geef de klasse op. Ga daarna naar de klas op klasnaam en pas de ' marge ' en ' opvulling ' eigendommen. Dit bericht heeft het gebruik van marge versus opvulling in CSS uitgelegd.
< div klas = 'linux' >
< p > Linuxhint is een van de beste tutorial-websites < / p >
< / div >
< div klas = 'marge-div' stijl = 'border:1px effen zwart' >
< p >Linuxhint is een van de beste zelfstudiewebsites.< br >
< / p >
< div >
achtergrond- kleur : rgb ( 199 , 238 , 205 ) ;
lettertype- maat : medium;
grens : 3px rgb ( 114 , 250 , 114 ) ;
marge: 100px 100px 100px 100px;
}
Hoe gebruik je 'padding' in CSS?
< p > Linuxhint is een van de beste tutorialwebsites < / p >
< / div >
< div klas = 'padding-div' stijl = 'border:1px effen zwart' >
< p >Linuxhint is een van de beste zelfstudiewebsites.< br >
< / p >
< / div >
achtergrond- kleur : rgb ( 199 , 238 , 205 ) ;
lettertype- maat : medium;
opvulling: 50px 50px 50px 50px;
}
Conclusie