Left and Right Align – Using position
One method of aligning elements is to use position: absolute;: Tip: When aligning elements with position, always define margin and padding for the <body> element. This is to avoid visual differences in different browsers.
Center Align – Using margin
Setting the width of a block-level element will prevent it from stretching out to the edges of its container. Use margin: auto;, to horizontally center an element within its container. The element will then take up the specified width, and the remaining space will be split equally between the two margins.
Align
It is possible to align block elements (tables, images, objects, paragraphs, etc.) on the canvas with the align attribute.
position: absolute
An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed). However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling. Here is a simple example: This <div> element has position: relative; This...
position: fixed
An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element. A fixed element does not leave a gap in the page where it would normally have...
position: relative
An element with position: relative; is positioned relative to its normal position. Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.
position: static
HTML elements are positioned static by default. Static positioned elements are not affected by the top, bottom, left, and right properties. An element with position: static; is not positioned in any special way; it is always positioned according to the normal flow of the page.
Position
The position property specifies the type of positioning method used for an element. There are four different position values: static relative fixed absolute
Padding
The CSS padding properties define the space between the element border and the element content. The padding clears an area around the content (inside the border) of an element. The padding is affected by the background color of the element. The top, right, bottom, and left padding can be changed independently using separate properties. A...
Margin
The CSS margin properties define the space around elements. The margin clears an area around an element (outside the border). The margin does not have a background color, and is completely transparent. The top, right, bottom, and left margin can be changed independently using separate properties. A shorthand margin property can also be used, to...