HTML/CSS/CSS Attributes and Javascript Style Properties/padding
Содержание
padding: 10px
<!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>
<p>
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.
</p>
</body>
</html>
"padding" Example
<html>
<body>
<p>The image below has an all-around padding of 30px.</p>
<table>
<tr>
<td style="padding="30 30 30 30"">
<img src="http://www.wbex.ru/style/logo.png"
height="50"
width="50"
border="1">
</td>
</tr>
</table>
</body>
</html>
Padding with four value
<!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>
<div id="four-values">
<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Nulla bibendum eros sit amet lectus. Nunc eros massa,
interdum ut, congue ut, scelerisque quis, tellus.
</div>
</div>
</body>
</html>
Padding with one value
<!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>
<div id="one-value">
<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Nulla bibendum eros sit amet lectus. Nunc eros massa,
interdum ut, congue ut, scelerisque quis, tellus.
</div>
</div>
</body>
</html>
Padding with three value
<!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>
<div id="three-values">
<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Nulla bibendum eros sit amet lectus. Nunc eros massa,
interdum ut, congue ut, scelerisque quis, tellus.
</div>
</div>
</body>
</html>
Padding with two value
<!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>
<div id="two-values">
<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Nulla bibendum eros sit amet lectus. Nunc eros massa,
interdum ut, congue ut, scelerisque quis, tellus.
</div>
</div>
</body>
</html>