Tag Archives: HTML

What is ‘text-align:justify’ property?

  • 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.

CSS Outline

  • An outline is a line that is drawn around elements, outside the borders.
  • Diagram of outline:
  • E.g.:

<html>

<head>

<style>

p {

  border: 1px solid black;

  outline: yellow solid 10px;  

  text-align: center;

}

</style>

</head>

<body>

<p>Outline demo</p>

</body>

</html>

  • Output:
  • Outline offset: This is an outline property which is used to add space between outline & border of an element. This space is transparent.
  • Outline offset demo:

<html>

<head>

<style>

p {

  border: 1px solid black;

  outline: yellow solid 10px;  

  text-align: center;

  outline-offset: 15px;

  margin:30px;

}

</style>

</head>

<body>

<p>Outline demo</p>

</body>

</html>

  • Output:

CSS Box Model

  • The CSS box model consists of margins, padding, border & the content of an HTML element.
  • Box model diagram:
  1. The content area is the area where the text is displayed.
  2. The padding area is the space around the content.
  3. The border area is around the content and padding.
  4. The margin is the area around the border of the element and it is outside the element.
  5. The padding & margin areas are transparent i.e. we can’t color them.
  • When you set the width & height properties of an HTML element with CSS, you just set the width & height of the content area only. So to calculate the total size of an element, you must also add padding, margin & borders to the width & height.
  • Following are the formulae to calculate the total width and height of an element:

Total width of an element = width + left padding + right padding + 

left border + right border + left margin + right margin.

Total height of an element = height + top padding + bottom padding + 

top border + bottom border + top margin + bottom margin.