Table of Contents
CSS Block Properties
There are different types of block properties are used in CSS.
- Word-spacing
- Letter-spacing
- Vertical-align
- Text-align
- Text-indent
- White-space
- display
Word-spacing
- By using the word-spacing property to adjust the spacing between individual words, use any positive or negative number in px (pixels), mm (millimeters), cm(centimeters) pc (picas), pt (points), in (inches), em (ems), ex (exs), or % (percentage).
- Example – word-spacing: 2px;.
Example
<!DOCTYPE html>
<html>
<head>
<style>
p {
word-spacing: 15px;
}
</style>
</head>
<body>
<h1> CSS Word-spacing property </h1>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
</body>
</html>Letter-spacing
- By using the letter-spacing property to adjust the space between characters by specifying a positive or negative value in px (pixels), mm (millimeters), cm(centimeters) pc (picas), pt (points), in (inches), em (ems), ex (exs), or % (percentage).
- Example – letter-spacing:1px;
Note:- That changing the letter-spacing attribute overrides any preexisting text justification.
Example
<!DOCTYPE html>
<html>
<head>
<style>
p {
letter-spacing: 15px;
}
</style>
</head>
<body>
<h1> CSS Letter-Spacing Property </h1>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
</body>
</html>Vertical-align
- By using the vertically align property to adjust the text along the text baseline, sub (subscript), super(superscript), top, text-top, middle, bottom, and text-bottom, or by any value, positive or negative, in px (pixels), mm (millimeters), cm(centimeters) pc (picas), pt (points), in (inches), em (ems), ex (exs), or % (percentage).
- Example – such as vertical-align: top;
Example
Text-align
- By using the text-align property to adjust left, right, center, or justify alignment.
Example
<!DOCTYPE html>
<html>
<head>
<style>
p {
text-align: right;
}
</style>
</head>
<body>
<h1> CSS Text-Align Property </h1>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
</body>
</html>Text-indent
- By using the text-indent property to adjust the increase or decrease indent. it can be set to any positive or negative value in px (pixels), mm (millimeters), cm(centimeters) pc (picas), pt (points), in (inches), em (ems), ex (exs), or % (percentage).
- Example – textindent:12px;.
Example
<!DOCTYPE html>
<html>
<head>
<style>
p {
text-indent: 100px;
}
</style>
</head>
<body>
<h1> CSS Text Indent Property </h1>
<p>Write the Some text some in this paragraph.</p>
<p>Write the Some text some in this paragraph.</p>
</body>
</html>White-space
White space inside or around text in any block-level element can be displayed in three different ways: normal, pre, and nowrap . Choose normal to ignore any white space, pre to leave the white space in with the text as it was coded, or nowrap to force any text to wrap only if the code has line break (<br>) tags.
Example
<!DOCTYPE html>
<html>
<head>
<style>
p {
white-space: pre;
}
</style>
</head>
<body>
<h1> CSS White-Spacing Property</h1>
<p>
Write some text..Write some text..Write some text..
Write some text..Write some text..Write some text..
Write some text..Write some text..Write some text..
Write some text..Write some text..Write some text..
Write some text..Write some text..Write some text..
</p>
</body>
</html>Display
- This attribute controls how the styled object displays in the browser.
- Value options are block, compact, inline, list-item, marker, none, run-in, and table.
Example
<!DOCTYPE html>
<html>
<head>
<style>
p {
display: inline;
}
</style>
</head>
<body>
<h1>CSS Display</h1>
<p>Welcome to the Nielitbhu.com.</p>
<p>Welcome to the Nielitbhu.com.</p>
<p>Welcome to the Nielitbhu.com.</p>
<p>Welcome to the Nielitbhu.com.</p>
<p>Welcome to the Nielitbhu.com.</p>
</body>
</html>