HTML/CSS/Text/text indent

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

Negative text indent value: -60px

 
<!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">
<head>
<title></title>
<style type="text/css">
p.hanging {
 text-indent: -5em;
 margin-left: 5em;
}
#content p.hanging {
 text-indent: -60px;
 margin: 0 0 0 60px;
 padding: 0;
}
#content h3 {
 text-indent: -60px;
 margin: 0 0 0 60px;
 padding: 0;
}
</style>
</head>
<body>
  <div id="content">
       <h3>Once more time with feeling</h3>
       <p class="hanging">handing;</p>
  </div>
</body>
</html>



Set text-indent to 2.5em

 
<!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">
<head>
<title></title>
<style type="text/css">
p {
 text-indent: 2.5em;
 margin: 0 0 0.5em 0;
 padding: 0;
}
</style>
</head>
<body>
  <h1>The heading for this page</h1>
  <p>This is a text.</p>
  <p>This is a text.</p>
</body>
</html>



Set text indent to 35px

 
<!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">
<head>
<title>Set background image and repeat separately</title>
<style type="text/css">
span.initcap {
 display: none;
}
p {
 line-height: 1em;
 background: red;
 text-indent: 35px;
 padding-top: 45px;
}
</style>
</head>
<body>
  <p><span class="initcap">O</span>nline. 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>



Set text indent to 37%

 
<!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">
<head>
<title>Set text indent to 37%</title>
<style type="text/css">
p {
 text-indent: 37%;
 line-height: 1em;
}
p span.initcap {
 font-size: 6em;
 line-height: 0.6em;
 font-weight: bold;
}
</style>
</head>
<body>
  <p><span class="initcap">O</span>nline. This is test. This is test. 
  This is test. This is test. This is test. This is test. This is test. 
  This is test. This is test. This is test. This is test. This is test. 
  This is test. This is test. This is test. This is test. This is test. 
  </p>
</body>
</html>



Set text indent to -5em

 
<!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">
<head>
<title></title>
<style type="text/css">
p.hanging {
 text-indent: -5em;
 margin-left: 5em;
}
#content p.hanging {
 text-indent: -60px;
 margin: 0 0 0 60px;
 padding: 0;
}
#content h3 {
 text-indent: -60px;
 margin: 0 0 0 60px;
 padding: 0;
}
</style>
</head>
<body>
  <div id="content">
       <h3>Once more time with feeling</h3>
       <p class="hanging">handing;</p>
  </div>
</body>
</html>



uses a negative value for text-indent and a positive value for padding-left.

 
<!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">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title></title>
<style type="text/css" media="Screen">
* .myStyle {
  text-indent: -50px;
  padding-left: 50px;
}
</style>
</head>
<body>

<p class="myStyle">asdf </p> 
    
</body>
</html>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/Text/text_indent&oldid=5851»