HTML/CSS/CSS Attributes and Javascript Style Properties/padding — различия между версиями

Материал из Web эксперт
Перейти к: навигация, поиск
м (1 версия)
 
м (1 версия)
 
(нет различий)

Текущая версия на 08:16, 26 мая 2010

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>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/CSS_Attributes_and_Javascript_Style_Properties/padding&oldid=4825»