HTML/CSS/CSS Attributes and Javascript Style Properties/word spacing

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

word-spacing: 10px

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<title>css typography</title>
<style type="text/css">
p {
    font-family: Verdana, arial, helvetica, sans-serif;
    font-size: 16px;
    letter-spacing: 2px;
    word-spacing: 10px;
}
</style>
</head>
<body>
<h1>this is a test. </h1>
<h2>this is a test. </h2>
<p>this is a test. <strong>this is a test. </strong> this is a test. </p>
<p>this is a test. </p>
</body>
</html>



word-spacing: -5px

 

<!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 {
          word-spacing: -5px;
      }
        </style>
    </head>
    <body>
    <p>
        a negative value.
    </p>
    </body>
</html>



"word-spacing" Example

    
<html>
<body>
<div id="myD" 
     style="width:400px; background-color:red;">
This is a sample paragraph.
</div>
<br>
<input type="button" 
       value="Set wordSpacing property to 10px" 
       onclick="myD.style.wordSpacing="10px"">
       
<input type="button" 
       value="Set wordSpacing property to 0.5cm" 
       onclick="myD.style.wordSpacing="0.5cm"">
       
<input type="button" 
       value="Set wordSpacing property to normal" 
       onclick="myD.style.wordSpacing="normal"">
</body>
</html>