Many were asking about the differences in margins and padding. Actually it is not so difficult to be solved, provided we are willing to learn. This post, congcot will try to explain how or what is the difference of the margin, padding, border, and content. What should be clear here is lying, because I own a few days backward like to be confused between where the margin, and where padding.
Take a look at the picture below.
Already described, where the margin, and where padding.
Little review
* Margin - Clear an area around the border. The margin does not have the background color, and completely transparent.
* Border - A border located around the padding and content. This border is affected by the background color of the box (can be colored)
* Padding - Clear an area around the content (located between the border and content). This padding is influenced by the background color box
* Content - The content of the box, in which text and images appear
For example:
This post, will explain how or what is the difference of margin, padding, border, and content. That should be obvious here is lying, because I own a couple of days backward rather confused between which the margin where, and where the place padding.
Code used above is:<div style="background:#FF0; border: 20px solid rgb #0F0; color: red; height: 200px; margin: 20px; padding: 20px; width: 200px;"></div>
Maybe that's a glimpse of the difference between Margin, Border, Padding, and Content. Hopefully useful to all.
The bottom line ...
Often there is confusion in the placement location of the margin and padding. Sometimes we think the location is wrong, upside down. With this post, expected errors were gone, and nothing else is wrong in its placement.
Post a Comment