HTML/CSS/Text/text indent
Содержание
Negative text indent value: -60px
<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"> <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>
Once more time with feeling
handing;
</body> </html>
</source>
Set text-indent to 2.5em
<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"> <head> <title></title> <style type="text/css"> p {
text-indent: 2.5em; margin: 0 0 0.5em 0; padding: 0;
} </style> </head> <body>
The heading for this page
This is a text.
This is a text.
</body> </html>
</source>
Set text indent to 35px
<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"> <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>
Online. 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>
Set text indent to 37%
<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"> <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>
Online. 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.
</body> </html>
</source>
Set text indent to -5em
<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"> <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>
Once more time with feeling
handing;
</body> </html>
</source>
uses a negative value for text-indent and a positive value for padding-left.
<source lang="html4strict">
<!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>
asdf
</body> </html>
</source>