HOME -> CSS_TUTORIAL -> css-13 Onsdag, 13. December 2017

HOME
FORUM
OPEN DIRECTORY
BOOKMARK
Offentliggjort 2002 - Opdateret n/a

CSS lektion 13

Box-oriented model - Padding

Følgende egenskaber for padding beskrives i denne lektion:
  • Padding-top
  • Padding-right
  • Padding-bottom
  • Padding-left
  • Sammenskrivning

Padding-top
Denne egenskab angiver padding-top for et element.


h1 {
background: yellow;
padding-top: 50px;
}


Padding-right
Denne egenskab angiver padding-right for et element.


h1 {
background: yellow;
padding-right: 25px;
}


Padding-bottom
Denne egenskab angiver padding-bottom for et element.


h1 {
background: yellow;
padding-bottom: 20px;
}


Padding-left
Denne egenskab angiver padding-left for et element.


h1 {
background: yellow;
padding-left: 25px;
}


Sammenskrivning til padding
Det er mulig at sammenskrive til padding. Rækkefølgen er:

padding-top | padding-right | padding-bottom | padding-left

Altså med ur, startende med angivelse af top padding!


h1 {
background: yellow;
padding: 50px 25px 20px 25px;
}

/* Gemmes som padding.css */



<html>
<head>
<title>Anvendelse af padding</title>
<link rel="stylesheet" type="text/css" href="padding.css" />
</head>
<body>
<h1>De tryllebundne tilskuere, Carters medhjælpere og de to andre anatomiprofessorer der var blevet tilkald for at foretage en undersøgelse af mumien, kunne ikke ....</h1>
</body>
</html>


Vis som eksempel

I stedet for at angive værdierne i px, kan du også bruge pt, em eller andre værdier.


Andre regler

Hvis der kun angives en værdi, vil den gælde for alle sider (top, right, bottom, left).
Hvis der angives to eller tre værdier, vil den manglende værdi tages fra den modsatte side.


h1 { padding: 2em }
/* alle padding sættes til 2em */


h2 { padding: 1em 2em }
/* top og bottom = 1em, right og left = 2em */


h3 { padding: 1em 2em 3em }
/* top=1em, right=2em, bottom=3em, left=2em */





Næste lektion handler om border.

BORDER >>

 

Copyright © 2002 - 2017
NETeXplorer.dk · All rights reserved Top