Monday, May 25, 2015

Box Model, and Page Layout

Intermediate CSS, Box Model, and Page Layout


Box Model

The Box Model is an element used to create a box around elements on the page. There are several attributes of the Box Model that allow designers to alter the appearance of the Box Model. Below is a diagram of the CSS Box Model.



Box Model Attributes

Margin: the space between the element and other content
Border: the border of the actual box
Padding: the space between the element’s content and the box’s border
Content: the content of the element

Sizing and Spacing

box height = top margin + top border + top padding + height + bottom padding + bottom border + bottom margin
box width = left margin + left border + left padding + width + right padding + right border + right margin


Page Layout

A webpage layout is very important to give better look to the website. It takes considerable time to design a website's layout with great look and feel. Now a days, all modern websites are using CSS and JavaScript based framework to come up with responsive and dynamic websites but we can create a good layout using simple HTML tables or division tags in combination with other formatting tags

No comments:

Post a Comment