Common Elements
| Element | Value | Examples |
|---|---|---|
| float: <position> | float is used to float an element on the left or right margin.<position> could be none, left or right. | <img src=”sample.jpg” style=”float: right” /> |
| clear: <position> | clear is used to display an element in the first available space where the specified margin is clear of floating elements. <position> could be left, right, all or none. |
<hr style=”clear: right” /> |
| margin-top: <length> margin-right: <length> margin-bottom: <length> margin-left: <length> |
These elements are used to set the size of margins around an element. <length> can be unit of length, a percentage of the width of the containing element, or the keyword “auto” (the default) which enables the browser to set the margin size. |
<table style=”margin-top: 15px”> <body style=”margin-left: 20px”> |
| margin: <top> <right> <bottom> <left> | margin element combine all margin styles in a single style. <top>, <right>, <bottom> and <left> are the margins of the top, right, bottom and left edges. If you include only three values, the margins are applied to the top, right and bottom. If only two values are specified, the first value is applied to top and bottom edges whereas second value is applied to right and left edges. If you apply only one value, it is applied to all four edges. | <img src=”sample.jpg” style=”margin: 0 0 5 15″> <body style=”margin: 10″> |
| background-image: url(<url>) | background-image attribute is used to set the background image for any element. <url> is the name and location of the image file to set as background. | <body style=”background-image: url(sample.jpg)”> |
| background-repeat: <type> | This attribute is used used in combination with background-image attribute. It controls how browser tile an image across and element’s background. The <type> can be one of keywords out of repeat (the default), repeat-x, repeat-y, or no-repeat. | <body style=”background-image: url(sample.jpg); background-repeat: repeat-x”> |
| background-position: <horizontal> <vertical> | This attribute is used to place the background image in a specific position behind the element. <horizontal> is the horizontal position of the image, and <vertical> is the vertical position. You can specify a position as the distance from the top-left corner of the element, a percentage of the element’s width and height, or by using a keyword. Keyword options are top, center, or bottom for vertical position, and left, center, or right for horizontal placement. | <body style=”background-image: url(sample.jpg); background-position: 10% 20%”> <body style=”background-image: url(sample.jpg); background-position: right bottom”> |