CSS Box Model
In its early years of HTML, there was a common practice that the layout was done with HTML Tables. After the introduction of CSS, the approach is changed to separate the page layout from the page contents by using Style Sheet. This chapter covers the CSS layout model in detail, including box model , positioning , float etc. and shows how they all work together.
The CSS box model is fundamental to laying out documents with CSS. Every element in a browser is in a box or is a box, that means a web page is a series of boxes. The CSS box model describes the rectangular boxes that can contain any number of other boxes. A CSS box consists of a content area that surrounded by padding and padding surrounded by borders and finally borders surrounded by margins . These properties control the space around the element`s contents and other elements around it. But the padding, border and margins are optional. The box model determines how elements are positioned within the browser window.
Positioning
Later in this chapter explains how you can position elements to create various page layouts using CSS properties . Every location in the browser window has a set of coordinates associated with it (x-coordinates and y-coordinates). These x and y coordinates represent individual pixel position in the browser area. The upper left corner of the browser area is x=0 and y=0. With the help of CSS you can control positioning of elements in the window. CSS positioning is a way to control the location of an element anywhere on the browser area with pixel precision. There are several ways to position elements using CSS. This chapter covers the basics of CSS positioning and show how it can be used in a content type setting.
In the above image the x and the y coordinates represent individual pixel position in the browser area.