Indent and margins on text in HTML
Margins on text
Margins on text is controlled by STYLE="margin: ", which is a style that can be used on all types of text section, including the BODY tag. Written like this, you specify all four margins in one take. If you want to, and this can often be smarter in regards to the programming, you can use the specific styles for margins: margin-top, margin-bottom, margin-left and margin-right.
When using STYLE="margin: " you should be a bit alert as to what you are writing.
If you only use one value, STYLE="margin:30px", this is the value used on all four margins.
If you use two values, STYLE="margin:30px 40px", the first value is used for top and bottom, and the second value for left and right margin, i.e. the margins are identical in pairs.
If you use three values, STYLE="margin:30px 40px 20px", the first value is used for the top margin. The second value is left and right margin, i.e. these are the same. The third value is the bottom margin. Using three values you can't do it the opposite way, i.e. same top and bottom margin and different left and right margins. This requires four values.
If you use four values, STYLE="margin:30px 40px 30px 50px", the first value is the top margin, the second values is the right margin, third value is the bottom margin, and the fourth value is the left margin.
The width of the margin can, as all lengths, be specified in %, in, cm, mm, em, pt, pc and px according to preferences. Pixels, px, are usually a good unit to works with, as screen sizes and resolutions are usually in pixels, and you don't get into troubles with changing font sizes using pixels.
This is a few lines from Kenneth Grahame's The Wind in the Willows in a DIV tag for demonstration. Here we use STYLE="margin: 30px 20px 10px 20px":
Without a specified margin it looks like this instead:
If you want to, the style can handle mixed units, e.g. STYLE="margin: 30px 20mm 10% 20em", which looks like this:
Margin can also take negative values, e.g. STYLE="margin: 30px 20px 10px -20px":
This is used e.g. for aligning the content in two DIVs, though according to the programming they are supposed to be misaligned.
When using STYLE="margin: " you should be a bit alert as to what you are writing.
If you only use one value, STYLE="margin:30px", this is the value used on all four margins.
If you use two values, STYLE="margin:30px 40px", the first value is used for top and bottom, and the second value for left and right margin, i.e. the margins are identical in pairs.
If you use three values, STYLE="margin:30px 40px 20px", the first value is used for the top margin. The second value is left and right margin, i.e. these are the same. The third value is the bottom margin. Using three values you can't do it the opposite way, i.e. same top and bottom margin and different left and right margins. This requires four values.
If you use four values, STYLE="margin:30px 40px 30px 50px", the first value is the top margin, the second values is the right margin, third value is the bottom margin, and the fourth value is the left margin.
The width of the margin can, as all lengths, be specified in %, in, cm, mm, em, pt, pc and px according to preferences. Pixels, px, are usually a good unit to works with, as screen sizes and resolutions are usually in pixels, and you don't get into troubles with changing font sizes using pixels.
This is a few lines from Kenneth Grahame's The Wind in the Willows in a DIV tag for demonstration. Here we use STYLE="margin: 30px 20px 10px 20px":
'Hullo, Mole!' said the Water Rat.
'Hullo, Rat!' said the Mole.
'Would you like to come over?' enquired the Rat presently.
'Oh, its all very well to TALK,' said the Mole, rather pettishly, he being new to a river and riverside life and its ways.
The Rat said nothing, but stooped and unfastened a rope and hauled on it; then lightly stepped into a little boat which the Mole had not observed. It was painted blue outside and white within, and was just the size for two animals; and the Mole's whole heart went out to it at once, even though he did not yet fully understand its uses.
'Hullo, Rat!' said the Mole.
'Would you like to come over?' enquired the Rat presently.
'Oh, its all very well to TALK,' said the Mole, rather pettishly, he being new to a river and riverside life and its ways.
The Rat said nothing, but stooped and unfastened a rope and hauled on it; then lightly stepped into a little boat which the Mole had not observed. It was painted blue outside and white within, and was just the size for two animals; and the Mole's whole heart went out to it at once, even though he did not yet fully understand its uses.
Without a specified margin it looks like this instead:
'Hullo, Mole!' said the Water Rat.
'Hullo, Rat!' said the Mole.
'Would you like to come over?' enquired the Rat presently.
'Oh, its all very well to TALK,' said the Mole, rather pettishly, he being new to a river and riverside life and its ways.
The Rat said nothing, but stooped and unfastened a rope and hauled on it; then lightly stepped into a little boat which the Mole had not observed. It was painted blue outside and white within, and was just the size for two animals; and the Mole's whole heart went out to it at once, even though he did not yet fully understand its uses.
'Hullo, Rat!' said the Mole.
'Would you like to come over?' enquired the Rat presently.
'Oh, its all very well to TALK,' said the Mole, rather pettishly, he being new to a river and riverside life and its ways.
The Rat said nothing, but stooped and unfastened a rope and hauled on it; then lightly stepped into a little boat which the Mole had not observed. It was painted blue outside and white within, and was just the size for two animals; and the Mole's whole heart went out to it at once, even though he did not yet fully understand its uses.
If you want to, the style can handle mixed units, e.g. STYLE="margin: 30px 20mm 10% 20em", which looks like this:
'Hullo, Mole!' said the Water Rat.
'Hullo, Rat!' said the Mole.
'Would you like to come over?' enquired the Rat presently.
'Oh, its all very well to TALK,' said the Mole, rather pettishly, he being new to a river and riverside life and its ways.
The Rat said nothing, but stooped and unfastened a rope and hauled on it; then lightly stepped into a little boat which the Mole had not observed. It was painted blue outside and white within, and was just the size for two animals; and the Mole's whole heart went out to it at once, even though he did not yet fully understand its uses.
'Hullo, Rat!' said the Mole.
'Would you like to come over?' enquired the Rat presently.
'Oh, its all very well to TALK,' said the Mole, rather pettishly, he being new to a river and riverside life and its ways.
The Rat said nothing, but stooped and unfastened a rope and hauled on it; then lightly stepped into a little boat which the Mole had not observed. It was painted blue outside and white within, and was just the size for two animals; and the Mole's whole heart went out to it at once, even though he did not yet fully understand its uses.
Margin can also take negative values, e.g. STYLE="margin: 30px 20px 10px -20px":
'Hullo, Mole!' said the Water Rat.
'Hullo, Rat!' said the Mole.
'Would you like to come over?' enquired the Rat presently.
'Oh, its all very well to TALK,' said the Mole, rather pettishly, he being new to a river and riverside life and its ways.
The Rat said nothing, but stooped and unfastened a rope and hauled on it; then lightly stepped into a little boat which the Mole had not observed. It was painted blue outside and white within, and was just the size for two animals; and the Mole's whole heart went out to it at once, even though he did not yet fully understand its uses.
'Hullo, Rat!' said the Mole.
'Would you like to come over?' enquired the Rat presently.
'Oh, its all very well to TALK,' said the Mole, rather pettishly, he being new to a river and riverside life and its ways.
The Rat said nothing, but stooped and unfastened a rope and hauled on it; then lightly stepped into a little boat which the Mole had not observed. It was painted blue outside and white within, and was just the size for two animals; and the Mole's whole heart went out to it at once, even though he did not yet fully understand its uses.
This is used e.g. for aligning the content in two DIVs, though according to the programming they are supposed to be misaligned.
Centering of text blocks by using margin
Besides using numbers and units for margin values, you can also use the value auto. Auto center the text block on the page. This is used e.g. to center the reading pane on this page. If you only specify STYLE="margin:auto", the content is centered both top/bottom and left/right. This is generally a bad idea in regards to readability of the page, but it is possible. A more common and user friendly set-up is centering left/right and specifying top and bottom. On this page I have chosen to keep top and bottom clear of the edges of the screen, so here it could be STYLE="margin:20px auto". Touching the edge would be STYLE="margin:0px auto". If the size of the text block is smaller than the screen, so you can't have the distance 0px in both ends, top margin is the one being 0px.
Text indents
If writing longer pages of text, the classic indent on the first line in a paragraph can be a good idea.
There is several solutions to doing this. The choice depends on the code being used in general, and what you like.
The quick solution is using the code for space, i.e. the HTML code for a space, which could be  . If you just press two or more spaces, the indent can only be seen in the source code, unless you have specified STYLE="white-space: pre-wrap;" on the text tag. An indent of three spaces is thus    .
If we try playing around with some text, the source code looks like this:
On the screen it looks like this:
If you use this approach, you should be aware that using text-align:justify can make the browser stretch the spacing. This is a paragraph from a Danish book called Takt og Tone by Emma Gad, where the difference is quite easy to see, first using text-align:justify and then text-align:left:
Therefore: If using text-align:justify, another approach is advisable.
If you have your text in a tag like DIV, P or BLOCKQUOTE, using the style named text-indent can be a solution. A DIV tag using text-indent:30px, containing the paragraph from before, looks like this using text-align:justify and text-align:left:
The size of the indent can, as any other length, be specified in %, in, cm, mm, em, pt, pc and px according to preferences. Pixels, px, are usually a good unit to works with, as screen sizes and resolutions are usually in pixels, and you don't get into troubles with changing font sizes using pixels. The value can also be negative. At e.g. text-indent:-30px it looks like this:
There is several solutions to doing this. The choice depends on the code being used in general, and what you like.
The quick solution is using the code for space, i.e. the HTML code for a space, which could be  . If you just press two or more spaces, the indent can only be seen in the source code, unless you have specified STYLE="white-space: pre-wrap;" on the text tag. An indent of three spaces is thus    .
If we try playing around with some text, the source code looks like this:
'Hullo, Mole!' said the Water Rat.<BR>
 'Hullo, Rat!' said the Mole.<BR>
  'Would you like to come over?' enquired the Rat presently.<BR>
   'Oh, its all very well to TALK,' said the Mole, rather pettishly, he being new to a river and riverside life and its ways.<BR>
    The Rat said nothing, but stooped and unfastened a rope and hauled on it; then lightly stepped into a little boat which the Mole had not observed. It was painted blue outside and white within, and was just the size for two animals; and the Mole's whole heart went out to it at once, even though he did not yet fully understand its uses.
 'Hullo, Rat!' said the Mole.<BR>
  'Would you like to come over?' enquired the Rat presently.<BR>
   'Oh, its all very well to TALK,' said the Mole, rather pettishly, he being new to a river and riverside life and its ways.<BR>
    The Rat said nothing, but stooped and unfastened a rope and hauled on it; then lightly stepped into a little boat which the Mole had not observed. It was painted blue outside and white within, and was just the size for two animals; and the Mole's whole heart went out to it at once, even though he did not yet fully understand its uses.
On the screen it looks like this:
'Hullo, Mole!' said the Water Rat.
'Hullo, Rat!' said the Mole.
'Would you like to come over?' enquired the Rat presently.
'Oh, its all very well to TALK,' said the Mole, rather pettishly, he being new to a river and riverside life and its ways.
The Rat said nothing, but stooped and unfastened a rope and hauled on it; then lightly stepped into a little boat which the Mole had not observed. It was painted blue outside and white within, and was just the size for two animals; and the Mole's whole heart went out to it at once, even though he did not yet fully understand its uses.
'Hullo, Rat!' said the Mole.
'Would you like to come over?' enquired the Rat presently.
'Oh, its all very well to TALK,' said the Mole, rather pettishly, he being new to a river and riverside life and its ways.
The Rat said nothing, but stooped and unfastened a rope and hauled on it; then lightly stepped into a little boat which the Mole had not observed. It was painted blue outside and white within, and was just the size for two animals; and the Mole's whole heart went out to it at once, even though he did not yet fully understand its uses.
If you use this approach, you should be aware that using text-align:justify can make the browser stretch the spacing. This is a paragraph from a Danish book called Takt og Tone by Emma Gad, where the difference is quite easy to see, first using text-align:justify and then text-align:left:
Det har været mig så magtpåliggende at få nedskrevet disse grundlæggende Råd for vor Omgangstone, at de er faldet mig i Pennen, før jeg tog fat det, hvor jeg rettelig skulde begynde, nemlig med at sige, at al virkelig god Opførsel kommer indefra, udspringer naturligt fra det Sind, som er åbent for Velvilje, Forståelse og Medynk med Andre.
Det har været mig så magtpåliggende at få nedskrevet disse grundlæggende Råd for vor Omgangstone, at de er faldet mig i Pennen, før jeg tog fat det, hvor jeg rettelig skulde begynde, nemlig med at sige, at al virkelig god Opførsel kommer indefra, udspringer naturligt fra det Sind, som er åbent for Velvilje, Forståelse og Medynk med Andre.
Therefore: If using text-align:justify, another approach is advisable.
If you have your text in a tag like DIV, P or BLOCKQUOTE, using the style named text-indent can be a solution. A DIV tag using text-indent:30px, containing the paragraph from before, looks like this using text-align:justify and text-align:left:
Det har været mig så magtpåliggende at få nedskrevet disse grundlæggende Råd for vor Omgangstone, at de er faldet mig i Pennen, før jeg tog fat det, hvor jeg rettelig skulde begynde, nemlig med at sige, at al virkelig god Opførsel kommer indefra, udspringer naturligt fra det Sind, som er åbent for Velvilje, Forståelse og Medynk med Andre.
Det har været mig så magtpåliggende at få nedskrevet disse grundlæggende Råd for vor Omgangstone, at de er faldet mig i Pennen, før jeg tog fat det, hvor jeg rettelig skulde begynde, nemlig med at sige, at al virkelig god Opførsel kommer indefra, udspringer naturligt fra det Sind, som er åbent for Velvilje, Forståelse og Medynk med Andre.
The size of the indent can, as any other length, be specified in %, in, cm, mm, em, pt, pc and px according to preferences. Pixels, px, are usually a good unit to works with, as screen sizes and resolutions are usually in pixels, and you don't get into troubles with changing font sizes using pixels. The value can also be negative. At e.g. text-indent:-30px it looks like this:
The Rat said nothing, but stooped and unfastened a rope and hauled on it; then lightly stepped into a little boat which the Mole had not observed. It was painted blue outside and white within, and was just the size for two animals; and the Mole's whole heart went out to it at once, even though he did not yet fully understand its uses.