Wat doet een padding precies? op http://portfolio.saimen.nl gebruik ik onderin bij het 'soort van menuutje' ook een padding. Het kleine pijltje wat voorin staat, is een achtergrond afbeelding, die niet herhaald word en aan de linkerkant staat, in dezelfde span waar de achtergrondafbeelding staat, staat ook de tekst van het menuitem, maar deze wil ik natuurlijk niet over het pijltje heen hebben, dus dacht ik dat ik wel een padding kon gebruiken, want ik dacht dat deze de inhoud van een element verplaaste, maar als je nu aan de rechterkant kijkt, zie je dat de span uitgerekt wordt. Dus....wat is een padding precies en hoe pas je hem op de juiste manier toe?
Lees onderstaande even (bron: http://w3schools.com)
"The CSS padding properties define the space between the element border and the element content. Negative values are not allowed. The top, right, bottom, and left padding can be changed independently using separate properties. A shorthand padding property is also created to control multiple sides at once."
Volgens mij zit het zo, je geeft een breedte op voor een div-inhoud, maar als je dan een padding opgeeft, moet je die er weer bij de breedte afhalen. Het lijkt inderdaad nogal vreemd, en het lijkt vrij veel op margin, met het verschil dat padding binnen het opgegeven element werkt en margin erbuiten.
Dus ik heb een div die ik 400 px breed wil, met een padding van 5, dan krijg je:
width:490px;
padding:0px 5px 0px 5px;
Het resultaat is dat je links en rechts een padding hebt van 5.
@Robert: als je een padding opgeeft, betekent het niet dat je die van de breedte af moet trekken.
Een padding is niets meer dan een stukje ruimte tussen de rand van een element en de inhoud ervan. Als je dus een stukje ruimte wilt hebben tussen bijvoorbeeld een stukje tekst en de linker kant van je div, dan kun je een padding gebruiken.
Bij een margin wordt je hele element t.o.v een ander element verplaatst.
Neej, bij een Margin worden de omliggende elementen verplaatst, zo zou het in ieder geval moeten zijn. Bij 0px margin liggen omliggende elementen tegen het hoofdelement aan, en bij 5px margin liggen de omliggende elementen 5px van het hoofdelement af.
Wat de topicstarter (simon)al aangaf rekt zijn span element uit als die de padding toepast.. Het is een beetje vreemd, maar het schijnt dat je met de width de breedte van de content opgeeft ofzo. Ik heb hier zelf ook last van gehad, en heb het opgelost door de breedte - padding te gebruiken voor elementen.
In principe kan je het dus zo zien..
padding, is een marge rondom de content.
margin is een marge rondom het element.
kan je niet iets van 70%-10px doen ofzo? Dit is voor mij ook een gok, ik werk normaal gesproken met vaste breedtes, waardoor ik daar niet zo'n last van heb.
In principe kan je het dus zo zien..
padding, is een marge rondom de content.
margin is een marge rondom het element.
Dat klopt helemaal. Zie ook onderstaand voorbeeldje van hoe padding en margin nou precies werken. Het bestaat een enkele div met een breedte van 600px, een margin van 50px vanaf de bovenkant van het scherm en een padding voor top/bottom en left/right van respectievelijk 10px en 20px.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Padding example</title>
<style type="text/css">
<!--
* {
margin: 0px;
padding: 0px;
}
#container {
width: 600px;
margin: 50px auto;
padding: 10px 20px;
border: thin solid #0066FF;
}
p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
border: thin solid #FF3300;
}
-->
</style>
</head>
<body>
<div id="container">
<p>Een voorbeeld van een stukje tekst in een div met padding...</p>
</div>
</body>
</html>
