Dus ik heb deze HTML-code:
<!DOCTYPE html>
<html>
<body>
<div style="background-color:black;color:white;padding:20px">
<h2>London</h2>
</body>
</html>
Mijn vraag is, wat doet de padding:20pxonroerend goed doen in het stijlattribuut voor de div-element? Is dat hetzelfde als het doen van padding:top=20px, padding:right=20px, padding:bottom=20px, padding:left=20px?
Ik heb geprobeerd (padding:top=20px, padding:right=20px, padding:bottom=20px, padding:left=20px) In de h2Element als een attribuut zoals dit (verwijderd padding:20pxvan het stijlattribuut in de divElement):
<h2 padding:top=20px, padding:right=20px, padding:bottom=20px, padding:left=20px>London</h2>
Maar om de een of andere reden gaf de bovenstaande lijn mij een andere output dan het plaatsen van de padding:20pxin het stijlattribuut van de div-element. Kan iemand me dit verschil uitleggen? Bij voorbaat dank voor de hulp!
Antwoord 1, Autoriteit 100%
Uw syntaxis is vol fouten.
het moet
zijn
<h2 style="padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px">London</h2>
en ja, kortom dit is identiek aan
<h2 style="padding: 20px">London</h2>
Er zijn ook drie andere korte vormen:
padding: 10px 5px;
betekent het toepassen van 10px boven/onder en 5px links/rechts.
padding: 10px 5px 0;
betekent 10px boven, 0 onder en 5px links/rechts toepassen.
padding: 1px 2px 3px 4px;
betekent 1px boven, 2px rechts, 3px onder, 4px links (met de klok mee, beginnend bovenaan).
Antwoord 2, autoriteit 14%
niet geldig
<h2 padding:top=20px, padding:right=20px, padding:bottom=20px, padding:left=20px>London</h2>
gebruik
h2{
background: #ccc;
}<h2 style="padding-top:20px; padding-right:20px; padding-bottom:20px; padding-left:20px">London</h2>Antwoord 3
Ja, padding:20px;past dezelfde hoeveelheid opvulling toe op alle zijden van uw element.
Ook uw HTML is onjuist. Doe dit:
<h2 style="padding-top:20px; padding-right:20px; padding-bottom:20px; padding-left:20px">London</h2>
Of gewoon,
<h2 style="padding:20px">London</h2>
Antwoord 4
de jouwe, h2opvulstijl is onjuist.
je moet styletoevoegen voor het h2-element.
<h2 style="padding:20px">London</h2>
Antwoord 5
Als je opvulling aan alle kanten tegelijk wilt toepassen, kun je beter gewoon padding:20pxgebruiken als een waarde voor stijl, omdat dit de codegrootte vermindert.
Zie deze link voor meer voorbeelden over het gebruik van CSS-opvulling:
http://www.w3schools.com/css/css_padding.asp
Antwoord 6
probeer dit eens. u zult weten hoe de vulling werkt. opvulling is voor het plaatsen van de tekst/het element in een element (ouder)
<div style="background-color:black;color:white;padding:20px">
<h2 style="border: solid 1px red">London</h2>
</div>Antwoord 7
padding:20pxpast opvulling toe in alle vier de richtingen.
Je kunt ook op deze manier padding:20px 20px 20px 20px;dit gaat als volgt padding : top right bottom left
Dus in plaats daarvan of schrijf opvulling-rechts, opvulling-top en andere twee, men kan eenvoudig opvulling schrijven en de opvulwaarde rechts linksboven onderaan toepassen. Deze methode is handig wanneer we verschillende opvulwaarden voor alle richtingen willen toepassen. Zoals padding: 5px 10px;Hiermee wordt opvulling 5px aan de boven- en onderkant en 10px van links rechts toegepast;
Ook uw HTML is onjuist. Doe dit:
<h2 style="padding-top:20px; padding-right:20px; padding-bottom:20px; padding-left:20px">London</h2>
OF
<h2 style="padding:20px 20px 20px 20px;">London</h2>
Of gewoon,
<h2 style="padding:20px;">London</h2>
Antwoord 8
Uw CSS-syntaxis is onjuist
De juiste syntaxis is:
<h2 style="padding-top=20px; padding-right=20px; padding-bottom=20px; padding-left=20px;">London</h2>
OF
<h2 style="padding=20px;">London</h2>
OF
<h2 style="padding=20px 20px 20px 20px;">London</h2>
Antwoord 9
h2{ padding:20px;}`<h2 style="padding:20px">London</h2>`
Antwoord 10
Uw syntaxis is helemaal verkeerd. Het zou zijn
<h2 style="padding-top: 20px; padding-right: 20px; padding-bottom: 20px;
padding-left: 20px">London</h2>
Ook als je aan alle kanten opvulling wilt geven, kun je het als volgt gebruiken:
<h2 style="padding: 20px;">London</h2>
Of je kunt ook schrijven als padding:10px 20px 30px 40px;het betekent padding-top:10px,padding-right:20px,padding-bottom:30px,padding-left:40px,
Padding: 10px 20pxhet betekent padding-top:10px,padding-bottom:10px,padding-left:20px,padding-right:20px
Padding: 10px 30px 20pxhet betekent padding-top:10px,padding-bottom:20px,padding-left:30px,padding-right:30px
Antwoord 11
h2{
background: #ccc;
}<h2 style="padding-top:20px; padding-right:20px; padding-bottom:20px; padding-left:20px">London</h2>Antwoord 12
opvulling:20px betekent dat u 20px opvulling geeft van rechtsboven linksonder. Bedoel je padding-top, padding-right…. in plaats van de padding:right, padding:top etc.. want deze werkt niet op de mijne.