Image Alignment
Hspace, Vspace and Border
Hspace and Vspace
hspace and vspace add transparent space around an image.
In this next example,
hspace="20" adds 20 pixels of spacing to both the left and right of
the image and vspace="80" adds 80 pixels of spacing both
above and below the image.
|
The next great author was John Milton. Milton wrote Paradise Lost. Then his wife died and he wrote Paradise Regained.
During the Renaissance America began. Chritsopher Columbus was a real
navigator who discovered America while cursing about the Atlantic. His ships
were called the Nina, the Pinta, and the Santa Fe.
|
<p>
<img ... align="left" hspace="20"
vspace="80" />
The next great author was John Milton.
Milton wrote Paradise Lost. Then his
wife died and he wrote Paradise Regained.
</p>
<p>
During the Renaissance America began.
Chritsopher Columbus was a real navigator
who discovered America while cursing about
the Atlantic. His ships were called the
Nina, the Pinta, and the Santa Fe.
</p>
Border
You can specify border="n" to put an n-pixel border around an image
that doesn't already have a border - but I don't recomment it. Browser support
for this is very buggy. Some IE versions make the border transparent. Other IE
versions use a black color for the border. Netscape often uses a black border
but sometimes chooses another color - and the border sometimes comes and goes
as you scroll the page up and down.
|
Later, the Pilgrims crossed the ocean, and this was known as Pilgrims Progress.
When they landed at Plymouth Rock, they were greeted by the Indians, who came down the hill rolling their war hoops
before them.
|
<p>
<img ... align="left" border="8" />
Later, the Pilgrims crossed the ocean,
and this was known as Pilgrims Progress.
</p>
<p>
When they landed at Plymouth Rock, they
were greeted by the Indians, who came down
the hill rolling their war hoops before them.
</p>
This example shows how it looks when you use border in conjunction with hspace
and vspace.
|
The Indian squabs carried porpoises on their cabooses, which proved very fatal to them.
The winter of 1620 was a hard one for the settlers. Many people died and many babies were born. Captain John Smith was
responsible for all this.
|
<p>
<img ... align="left" border="8"
hspace="20" vspace="40" />
The Indian squabs carried porpoises
on their cabooses, which proved very
fatal to them.
</p>
<p>
The winter of 1620 was a hard one for the
settlers. Many people died and many babies
were born. Captain John Smith was
responsible for all this.
</p>
The border attribute is more useful for getting rid of a border around an image.
When you use an image as a link, the browsers normally draw a border around the
image to identify it as a link. Most of us haven't found this useful, and it
tends to make the image look rather ugly. So just add border="0"
to images that are used as links if you don't like the borders.
|
One of the causes of the Revolutionary Wars was the English put tacks in their tea. Also, the colonists would send their
parcels through the post without any stamps.
During the war, the Red Coats and Paul Revere was throwing balls over stone walls. The dogs were barking and the
peacocks crowing. Finally, the colonists won the war and no longer had to pay for taxis.
|
<p>
<a href="...">
<img ... align="left" /></a>
One of the causes of the Revolutionary
Wars was the English put tacks in their
tea. Also, the colonists would send their
parcels through the post without any stamps.
</p>
<p>
<a href="...">
<img ... align="left"
border="0" /></a>
During the war, the Red Coats and Paul
Revere was throwing balls over stone walls.
The dogs were barking and the peacocks
crowing. Finally, the colonists won the war
and no longer had to pay for taxis.
</p>
|