HTML/CSS/CSS Attributes and Javascript Style Properties/padding
Содержание
padding: 10px
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
p {
margin: 10px;
padding: 10px;
color: black;
border: thin solid;
width: 250px;
line-height: 3em;
font-size: 1em;
}
</style>
</head>
<body>
this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test.
</body> </html> </source>
"padding" Example
<source lang="html4strict">
<html> <body>
The image below has an all-around padding of 30px.
<img src="http://www.wbex.ru/style/logo.png" height="50" width="50" border="1"> |
</body> </html>
</source>
Padding with four value
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>padding</title>
<style rel="stylesheet" type="text/css">
div {
float: left; background: gold; margin: 5px; width: 250px;
} div div {
float: none; background: white; border: none; font: 10px sans-serif; color: rgb(200, 200, 200); width: auto;
} div#four-values {
padding: 2px 4px 6px 8px;
}
</style> </head> <body>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Nulla bibendum eros sit amet lectus. Nunc eros massa,
interdum ut, congue ut, scelerisque quis, tellus.
</body>
</html>
</source>
Padding with one value
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>padding</title>
<style rel="stylesheet" type="text/css">
div {
float: left; background: gold; margin: 5px; width: 250px;
} div div {
float: none; background: white; border: none; font: 10px sans-serif; color: rgb(200, 200, 200); width: auto;
} div#one-value {
padding: 2px;
}
</style> </head> <body>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Nulla bibendum eros sit amet lectus. Nunc eros massa,
interdum ut, congue ut, scelerisque quis, tellus.
</body>
</html>
</source>
Padding with three value
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>padding</title>
<style rel="stylesheet" type="text/css">
div {
float: left; background: gold; margin: 5px; width: 250px;
} div div {
float: none; background: white; border: none; font: 10px sans-serif; color: rgb(200, 200, 200); width: auto;
} div#three-values {
padding: 2px 8px 6px;
}
</style> </head> <body>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Nulla bibendum eros sit amet lectus. Nunc eros massa,
interdum ut, congue ut, scelerisque quis, tellus.
</body>
</html>
</source>
Padding with two value
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>padding</title>
<style rel="stylesheet" type="text/css">
div {
float: left; background: gold; margin: 5px; width: 250px;
} div div {
float: none; background: white; border: none; font: 10px sans-serif; color: rgb(200, 200, 200); width: auto;
} div#two-values {
padding: 2px 8px;
}
</style> </head> <body>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Nulla bibendum eros sit amet lectus. Nunc eros massa,
interdum ut, congue ut, scelerisque quis, tellus.
</body>
</html>
</source>
