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>