Get all blogger tools and tutorials with Educations tools , Entertainment Tools, Govt. Jobs Alert... blogger tips,tricks secirets and more tutorial , templates , widgets ,multiuse of alphause,
Friday, April 11, 2014
What is the difference between padding and margins? Alphause
Helplogger
Home
Blog DesignWidgets SEO Menus Po ...
What is the difference between padding and margins?
0 comments
For those who would like to know more about HTML and CSS, today we will see about the difference between margin and padding CSS properties which allow us to add blank space between the HTML elements, preventing the elements from getting 'stuck' together.
Although both possess similar functions, each has its particularity.
1.Paddingdetermines the inner margins, being responsible for determining the distance between the content of a given element and its border.
2.Marginis applied to the outside of an element affecting how far the element is away from other elements.For more info, please take a look at the picture below:
Difference between margin and padding
Just as you have the option to define the borders for each side of your HTML elements (eg. borders in the sidebar), you can do the same with themarginandpadding properties. All you need to to do is to change the top, right, bottom and left values.
These values that you can select include: pixels (px), centimeters (cm), millimeters (mm). em units (em), x-height (ex), inches (in), picas (pc) and point sizes (pt).
By using margin and padding, you should add each value set in the four corners, as follows: top, right, bottom, left and each value must refer to each side of the HTML element. The first value is for the top, and they follow a clockwise direction, so the value would be close to the right, then bottom and finally, left.
Example 1:
padding:5px15px5px15px;
- top padding is5px
- right padding is15px
- bottom padding is5px
- left padding is15px
margin:10px5px10px5px;
- top margin is10px
- right margin is5px
- bottom margin is10px
- left margin is5px
If you define a single value, the distance applies to all sides, so it will be applied to the 4 sides of the HTML element that you want to modify.
Example 2:
padding: 5px (top and bottom) 15px (left and right);
margin: 10px (top and bottom) 5px (left and right);
If it helps to do it visually, think of an A4 page of type inside a picture frame. The margin is the space between the edge of the sheet of paper and the other elements (the parts of the frame) and the padding would be the space between the edge of the sheet and where the type starts on the page. The border would be the edge of the sheet of paper.
It's probably easier to understand if you have borders, then it also becomes obvious which one to use. Do you want the "space" after the border (outside the element = margin) or before the border (inside the element = padding).
Like
0
Random Posts
How to number comments in Blogger/BlogSpot18/04/2012 - 26 Comments
How To Add Related Posts Widget To Blogger with Thumbnails28/03/2012 - 247 Comments
Adding a Youtube Video in the Background of a Blogger blog19/09/2013 - 2 Comments
Related Posts:
How to add custom Variable definiti...
CSS3 Transition Property Basics
How to Increase Thumbnail Resoluti...
How to Use Cookies in Javascript
Understanding the Page Elements of ...
0 comments:
Comment as: Sign out
Notify mePublishPreview
Privacy Policy| Disclaimer| Terms of Service| Sitemap Back to Top DMCA PROTECTED
Search
Search
Follow on Facebook
Helplogger
Like
2,775 people like Helplogger .
Facebook social plugin
Follow on Blogger
Subscribe via Email
Receive Quality Tutorials Straight in your
Inbox by submitting your Email below.
Submit
Or subscribe via RSS Feed
Recent Posts
How to Add Numbered Page Navigation Widget for Blogger
5 Easy Ways to Improve the SEO of a blog & Boost Traffic
What is the difference between padding and margins?
Add a Custom jQuery Lightbox To Blogger
How to Use Cookies in Javascript
Recent Comments
Joseph V M
Hi, I've added pagination to my blog...
dara king
good
Mel Ancheta
You did it finally, thanks admin (: sorry for my late reply...
Sandra Harriette
It never ceases to amaze just how much we can do with Blogger....
Gabor Sziladi
One question i still have...how can i keep distance between my...
Popular Posts
Simple Recent Posts Widget for Blogger/Blogspot
Create A Rollover Image Effect (change image on mouseover)
Recent Comments Widget For Blogger
How to remove Blogger Picture/Image Shadow and Border
Hide/Show Widgets /Gadgets in Home/post /static/archive pages in Blogger
0
Like
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment