Design Box Model on your Web page using CSS
Box Model, a term that used in CSS only which include all that is near around the box. If we talk about the box model in CSS, it will comprise of all the things belongs to that box model i.e., borders, margins, padding and the content associated with it. All these terms have their specific meaning in accordance to design and give style to the content of your web page. Let’s have a quick learning of the meaning of these terms.
- Border : Border provides a specific outline around the content. All the content resides inside this boundary. This border value can vary according to how the developer wants it to look like. You can also provide the color for the border.
- Margin : A transparent area around the border. The value you give to the margin attribute, that much amount of area will get clear around the border of that content. There is no color associated with the margin area.
- Padding : The spacing between the content and its border. This clears the area between the two and helps in giving a better look to the content of your web page.
- Content : The text or an image that appears on the web page.
Now using the above attributes, the developer can make a box model looks attractive. The things that you can do with the box model are mentioned below with the details of the attributes associated with them.
- Defining width and height of an element : You can define the width and height of the element in your web page. The values of these attributes are specified in pixels (px). For example,
The total height and width of an element is calculated by following :
Total height : height + top border + bottom border + top padding + bottom padding + top margin + bottom margin.
Total Width : width + left padding + right padding + left border right border + left margin + right margin.
- CSS Border : A lot of attribute are associated with the CSS border property which includes giving style and color to it.
There are a lot of border styles available in CSS namely, dotted, dashed, solid, double, groove, ridge, inset and outset. All these values have their specific meaning and is given to the border-style attribute in specifying to any section. You can also specify border-width and border-color attributes. Also, you can give individually different styles to all the four sides of the border. For example,
- CSS Margin : CSS Margin sets a clear around the border of that element. You can individually set a margin along the four sides of border associated with that element i.e., top, left, right, and bottom. The values that it can accept are auto, length (specified by the developer), inherit (inherit the value from the element), in percentage (the browser calculates it). For example,
- CSS Padding : CSS padding basically defines the space between the content and the border of that content element. It is very commonly used in designing the we pages. Specifying its value greatly enhance the visibility of the content. You can specify padding to the along the four sides of the content namely, top, bottom, left, and right. This makes the content look attractive. For example,