CSS Classification Tutorial

How to set the margin of an image with CSS

The code below shows you how to set the margin of an image with CSS.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>Web Development Tutorials.com</title>

<style type="text/css">
img
{
float: right;
margin: 20px;
}
</style>

</head>
<body>
<p>
The image on this web page has a "float" property with a value of "right".
</p>
<p>
<img src="imagewebdevelopmenttutorials1w244h33.jpg" width="244" height="33" alt="" /> The image in this paragraph will float to the right and have a margin of "20px". This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. </p>
</body>
</html>

The code above creates the following web page:
how to set the margin of an image with CSS

Use the text editor below to practice what you have learned.