- When the text-align property is set to ‘justify’, each line is stretched so that every line has equal width & the left and right margins are straight.
- E.g. The newspaper and magazine has such text alignment where each and every line is so stretched that the left and right margins are equal.
- Following example illustrate the effect of text-align : justify.
- Let’s say we have the following html code:
<head>
<title>Page Title</title>
div{
border:1px solid black;
}
</head>
<body>
<div>
This is a paragraph. This is a paragraph.
This is a paragraph. This is a paragraph.
This is a paragraph. This is a paragraph.
This is a paragraph. This is a paragraph.
</div>
</body>
</html>
- The output of the above html code will be as follows:
- Let’s apply the text-align:justify to the div element and see the output. Replace the css style with the following code in the above code.
<style>
div{
border:1px solid black;
text-align:justify;
}
</style>
- The div content is so stretched that it has got equal margin on all the sides.
My Daily Notes 