Designing a layout of webpage using CSS is now a most popular and challenging among the web designer. The layout Design without a table have allowed us to add more features and control over the page.
While creating the box using CSS, it is necessary to understand the four terms MARGIN , BORDER , PADDING and ACTUAL CONTENTS.
Explanation of the different parts:
Margin – This is an area around the border. [ outside the border]
Border – A border that lies around the padding and content.
Padding – This is an area around the content. [inside the border]
Content – The content of the box, where text and images appear.
We have different types of tags to control these parts.
Margin tag – This tag clears an area around the border. The margin does not have a background color, and it is completely transparent.
Border tag – A border tag adds border around the padding and content. The border is affected by the background color of the box.
Padding tag – This tag clears an area around the content. The padding is affected by the background color of the box.
In order to set the width and height of an element correctly in all browsers, you need to know how the box model works.
Width and Height of an Element
When we specify the width and height properties of an element with CSS, we are just setting the width and height of the actual content area. To know the full size of the element, we must also add the padding, border and margin tags.
The total width of the element in the example below is 300px:
सयौ थुङ्गा फूलका हामी एउटै माला नेपाली, Welcome to my webpage. I'm from the Himalayan Country of Nepal. Well talking about me, I like mostly Web programming and Designing and furthermore I like Philosophical literature, Photography, Social networking. And I am Romantic and Sentimental person to some extent. Read more...