CSS Left

The left property specifies the distance from the left of the element to the default location of the element (when position=relative) or the distance between the left of the element and the left of the container (when position=absolute). This can be specified as a percentage, as a length, or 'auto'.

Let's take a look at two examples:

Example 1: CSS Code

div {
background-color:#FF00FF;
width:90%;
height:60px;
}
p {
position:relative;
left:30px;
}

The HTML code,

<div>
<p>This text is 30 pixels from the left of the box.
</div>

renders

This text is 30 pixels from the left of the box.

Without using the left property, the text would have started right at the left edge of the pink container. Applying {position:relative; left:30px;} shifts the text away from the default location by 30px.

Example 2: CSS Code

div {
background-color:#FF00FF;
width:90%;
height:60px;
}
p {
position:relative;
left:10%;
}

The HTML code,

renders

This text is 10% from the left of the box.

In the above example, the text is 10% away from the default location.

Next: CSS Right

AdBlock Detected!