CSS Margin
of 2
-
Upload
ankit-saha -
Category
Documents
-
view
217 -
download
0
Transcript of CSS Margin
-
8/12/2019 CSS Margin
1/2
8/4/13 CSS Margin
w3schools.com/css/css_margin.asp 1/2
HOME HTML CSS JAVASCRIPT JQUERY XML ASP.NET PHP SQL MORE... REFERENCES | EXAMPLES | FORUM | ABOU
Get Certified
Study Web Technologiesand get a diplomaat w3schools.com
SHARE THIS PAGE
Like 76k
CSSBasic
CSS HOME
CSS Introduction
CSS Syntax
CSS Id & Class
CSS How To
CSSStyling
Styling Backgrounds
Styling Text
Styling Fonts
Styling Links
Styling Lists
Styling Tables
CSSBox Model
CSS Box Model
CSS Border
CSS Outline
CSS Margin
CSS Padding
CSSAdvanced
CSS Grouping/Nesting
CSS Dimension
CSSDisplay
CSS Pos itioning
CSS Floating
CSS Align
CSS Pseudo-class
CSS Pseudo-element
CSS Navigation Bar
CSS Image Gallery
CSS Image Opacity
CSS Image Sprites
CSS Media Types
CSS Attribute Selectors
CSS Summary
CSSExamples
CSS Examples
CSS Quiz
CSS Certificate
CSSReferences
CSS Reference
CSS Selectors
CSS Reference Aural
CSS Web Safe Fonts
CSS Units
CSS Colors
CSS Color Values
CSS Color Names
CSS Color HEX
Previous Next Chapter CSS Margin
The CSS margin properties define the space around elements.
Margin
The margin clears an a rea around an element (outside the border). The margin does not have a ba ckground color,
and is completely transparent.
The top, right, bottom, and left margin can be ch anged independently using separate prope rties. A shorthand
margin property can also be used, to change allmargins a t once.
Possible Values
Value Description
auto The browser ca lculates a marg in
length Specifies a margin in px, pt, cm, etc.Default value is 0px
% Specifies a margin in percent of the width of the containing element
inherit Specifies that the margin should be inherited from the parent element
It is possible to use negative values, to overlap content.
Margin - Individual sides
In CSS, it is possible to specify different margins for different sides:
Example
margin-top:100px;
margin-bottom:100px;margin-right:50px;
margin-left:50px;
Try it yourself
Margin - Shorthand property
To shorten the code, it is poss ible to specify all the margin properties in one property. This is called a shorthand
property.
The shorthand property for all the margin properties is "margin":
Example
margin:100px 50px;
Try it yourself
The margin property can have from one to four values.
margin:25px 50px 75px 100px;
top margin is 25px
right margin is 50px
bottom margin is 75px
left margin is 100px
margin:25px 50px 75px;
top margin is 25px
right and left margins are 50px
bottom margin is 75px
margin:25px 50px;
top and bottom margins are 25px
right and left margins are 50px
margin:25px;
all four margins a re 25px
More Examples
WEB HOSTING
Best Web Hosting
eUK Web Hosting
UK Reseller Hosting
Domain, Hosting & Emai
WEB BUILDING
XML Editor - Free Trial!
FREE Website BUILDER
FREE Website C reator
Best Website Templates
STATISTICS
Browser Statistics
OS Statistics
Display Statistics
Search w3schools.com:
Select Language
http://w3schools.com/cssref/css_colorsfull.asphttp://w3schools.com/cssref/css_colors_legal.asphttp://w3schools.com/cssref/css_colors.asphttp://w3schools.com/cssref/css_selectors.asphttp://w3schools.com/cssref/css_selectors.asphttp://w3schools.com/css/css_exam.asphttp://w3schools.com/css/css_examples.asphttp://w3schools.com/css/css_attribute_selectors.asphttp://w3schools.com/css/css_image_gallery.asphttp://w3schools.com/css/css_image_gallery.asphttp://w3schools.com/css/css_pseudo_elements.asphttp://w3schools.com/css/css_align.asphttp://w3schools.com/css/css_positioning.asphttp://w3schools.com/css/css_dimension.asphttp://w3schools.com/css/css_padding.asphttp://w3schools.com/css/css_border.asphttp://w3schools.com/css/css_border.asphttp://w3schools.com/css/css_list.asphttp://w3schools.com/css/css_font.asphttp://w3schools.com/css/css_background.asphttp://w3schools.com/css/css_syntax.asphttp://w3schools.com/css/css_syntax.asphttp://w3schools.com/css/default.asphttp://adclick.g.doubleclick.net/aclk?sa=L&ai=BRJ2YFP39UfnCMIuBiAer7oHABY_fz4gDAAAAEAEg5-j6ATgAWI_--Y1IYOXC5IOkDrIBDXczc2Nob29scy5jb226AQlnZnBfaW1hZ2XIAQnaASdodHRwOi8vdzNzY2hvb2xzLmNvbS9jc3MvY3NzX21hcmdpbi5hc3CpAugYxmWcmoY-wAIC4AIA6gIaLzE2ODMzMTc1L1RvcExlZnRSZWN0YW5nbGX4AoHSHpADmgiYA8gGqAMB0ASQTuAEAaAGFg&num=0&sig=AOD64_0Lw8iJxTv9w4CX5NGnRBItPo5cfA&client=ca-pub-3440800076797949&adurl=http://w3schools.com/cert/default.asphttp://www.w3schools.com/http://www.w3schools.com/http://www.googleadservices.com/pagead/aclk?sa=L&ai=CsMdPFP39Uc-aMee6igeE24H4B56TgsAD5srN0FmG7uDFywEQASDn6PoBUIv879n-_____wFg5cLkg6QOoAGS2tvXA8gBAqkCtFLR8NGSUT7gAgCoAwHIA50EqgSgAU_QZ8BL_QCBldAYhhGhm0f5D4BKyJgLFwjUSU0Uodr434httsItzJ896wG8HatkLUDkcD3Zm37hUnHlFo3pDmop_NhS_gVq3jA_Lpj55N8F1noCUMwFrBSyNqGZBU_ocNt-KNB3_DiPSsDtf0h8X7fV58_Ra2xFx-ZwCCL8DGcQhw6oI4R2EzIYKW0tLRBYyq0MbCwiCAmvvNG4B3rrpongBAGIBgGgBgKAB9alpCg&num=1&cid=5GhBDJoEtUzlU28GkgXnyn2z&sig=AOD64_1zPXoo-20oFx9BFmAr77AmjmFZMQ&client=ca-pub-3440800076797949&adurl=http://www.thedostore.com/dogear2013.html&nm=1http://www.googleadservices.com/pagead/aclk?sa=L&ai=CsMdPFP39Uc-aMee6igeE24H4B56TgsAD5srN0FmG7uDFywEQASDn6PoBUIv879n-_____wFg5cLkg6QOoAGS2tvXA8gBAqkCtFLR8NGSUT7gAgCoAwHIA50EqgSgAU_QZ8BL_QCBldAYhhGhm0f5D4BKyJgLFwjUSU0Uodr434httsItzJ896wG8HatkLUDkcD3Zm37hUnHlFo3pDmop_NhS_gVq3jA_Lpj55N8F1noCUMwFrBSyNqGZBU_ocNt-KNB3_DiPSsDtf0h8X7fV58_Ra2xFx-ZwCCL8DGcQhw6oI4R2EzIYKW0tLRBYyq0MbCwiCAmvvNG4B3rrpongBAGIBgGgBgKAB9alpCg&num=1&cid=5GhBDJoEtUzlU28GkgXnyn2z&sig=AOD64_1zPXoo-20oFx9BFmAr77AmjmFZMQ&client=ca-pub-3440800076797949&adurl=http://www.thedostore.com/dogear2013.html&nm=1http://www.googleadservices.com/pagead/aclk?sa=L&ai=CsMdPFP39Uc-aMee6igeE24H4B56TgsAD5srN0FmG7uDFywEQASDn6PoBUIv879n-_____wFg5cLkg6QOoAGS2tvXA8gBAqkCtFLR8NGSUT7gAgCoAwHIA50EqgSgAU_QZ8BL_QCBldAYhhGhm0f5D4BKyJgLFwjUSU0Uodr434httsItzJ896wG8HatkLUDkcD3Zm37hUnHlFo3pDmop_NhS_gVq3jA_Lpj55N8F1noCUMwFrBSyNqGZBU_ocNt-KNB3_DiPSsDtf0h8X7fV58_Ra2xFx-ZwCCL8DGcQhw6oI4R2EzIYKW0tLRBYyq0MbCwiCAmvvNG4B3rrpongBAGIBgGgBgKAB9alpCg&num=1&cid=5GhBDJoEtUzlU28GkgXnyn2z&sig=AOD64_1zPXoo-20oFx9BFmAr77AmjmFZMQ&client=ca-pub-3440800076797949&adurl=http://www.thedostore.com/dogear2013.html&nm=1http://www.googleadservices.com/pagead/aclk?sa=L&ai=CsMdPFP39Uc-aMee6igeE24H4B56TgsAD5srN0FmG7uDFywEQASDn6PoBUIv879n-_____wFg5cLkg6QOoAGS2tvXA8gBAqkCtFLR8NGSUT7gAgCoAwHIA50EqgSgAU_QZ8BL_QCBldAYhhGhm0f5D4BKyJgLFwjUSU0Uodr434httsItzJ896wG8HatkLUDkcD3Zm37hUnHlFo3pDmop_NhS_gVq3jA_Lpj55N8F1noCUMwFrBSyNqGZBU_ocNt-KNB3_DiPSsDtf0h8X7fV58_Ra2xFx-ZwCCL8DGcQhw6oI4R2EzIYKW0tLRBYyq0MbCwiCAmvvNG4B3rrpongBAGIBgGgBgKAB9alpCg&num=1&cid=5GhBDJoEtUzlU28GkgXnyn2z&sig=AOD64_1zPXoo-20oFx9BFmAr77AmjmFZMQ&client=ca-pub-3440800076797949&adurl=http://www.thedostore.com/dogear2013.html&nm=1http://www.dreamtemplate.com/?ref=w3txtfreehttp://w3schools.com/css/css_padding.asphttp://www.eukhost.com/http://www.googleadservices.com/pagead/aclk?sa=L&ai=CsMdPFP39Uc-aMee6igeE24H4B56TgsAD5srN0FmG7uDFywEQASDn6PoBUIv879n-_____wFg5cLkg6QOoAGS2tvXA8gBAqkCtFLR8NGSUT7gAgCoAwHIA50EqgSgAU_QZ8BL_QCBldAYhhGhm0f5D4BKyJgLFwjUSU0Uodr434httsItzJ896wG8HatkLUDkcD3Zm37hUnHlFo3pDmop_NhS_gVq3jA_Lpj55N8F1noCUMwFrBSyNqGZBU_ocNt-KNB3_DiPSsDtf0h8X7fV58_Ra2xFx-ZwCCL8DGcQhw6oI4R2EzIYKW0tLRBYyq0MbCwiCAmvvNG4B3rrpongBAGIBgGgBgKAB9alpCg&num=1&cid=5GhBDJoEtUzlU28GkgXnyn2z&sig=AOD64_1zPXoo-20oFx9BFmAr77AmjmFZMQ&client=ca-pub-3440800076797949&adurl=http://www.thedostore.com/dogear2013.html&nm=1http://void%280%29/http://w3schools.com/browsers/browsers_display.asphttp://w3schools.com/browsers/browsers_os.asphttp://w3schools.com/browsers/browsers_stats.asphttp://www.dreamtemplate.com/?ref=w3txtfreehttp://www.wix.com/eteamhtml/400?utm_campaign=ma_w3schools.com&experiment_id=ma_w3schools.comlink2_400http://www.wix.com/eteamhtml/400?utm_campaign=ma_w3schools.com&experiment_id=ma_w3schools.comlink1_400Html&embed_tags=camp&utm_camp=hOUdCO-AmAMQm__j8AMhttp://www.altova.com/ref/?s=w3s_text2&q=xmlspyhttp://www.webhosting.uk.com/cpanel-hosting.phphttp://www.heartinternet.co.uk/http://www.eukhost.com/http://www.lunarpages.com/id/w3schools/goto/w3schoolshttp://w3schools.com/css/tryit.asp?filename=trycss_margin_shorthandhttp://w3schools.com/css/tryit.asp?filename=trycss_margin_sideshttp://w3schools.com/css/css_padding.asphttp://w3schools.com/css/css_outline.asphttp://w3schools.com/cssref/css_colorsfull.asphttp://w3schools.com/cssref/css_colornames.asphttp://w3schools.com/cssref/css_colors_legal.asphttp://w3schools.com/cssref/css_colors.asphttp://w3schools.com/cssref/css_units.asphttp://w3schools.com/cssref/css_websafe_fonts.asphttp://w3schools.com/cssref/css_ref_aural.asphttp://w3schools.com/cssref/css_selectors.asphttp://w3schools.com/cssref/default.asphttp://w3schools.com/css/css_exam.asphttp://w3schools.com/css/css_quiz.asphttp://w3schools.com/css/css_examples.asphttp://w3schools.com/css/css_summary.asphttp://w3schools.com/css/css_attribute_selectors.asphttp://w3schools.com/css/css_mediatypes.asphttp://w3schools.com/css/css_image_sprites.asphttp://w3schools.com/css/css_image_transparency.asphttp://w3schools.com/css/css_image_gallery.asphttp://w3schools.com/css/css_navbar.asphttp://w3schools.com/css/css_pseudo_elements.asphttp://w3schools.com/css/css_pseudo_classes.asphttp://w3schools.com/css/css_align.asphttp://w3schools.com/css/css_float.asphttp://w3schools.com/css/css_positioning.asphttp://w3schools.com/css/css_display_visibility.asphttp://w3schools.com/css/css_dimension.asphttp://w3schools.com/css/css_grouping_nesting.asphttp://w3schools.com/css/css_padding.asphttp://w3schools.com/css/css_margin.asphttp://w3schools.com/css/css_outline.asphttp://w3schools.com/css/css_border.asphttp://w3schools.com/css/css_boxmodel.asphttp://w3schools.com/css/css_table.asphttp://w3schools.com/css/css_list.asphttp://w3schools.com/css/css_link.asphttp://w3schools.com/css/css_font.asphttp://w3schools.com/css/css_text.asphttp://w3schools.com/css/css_background.asphttp://w3schools.com/css/css_howto.asphttp://w3schools.com/css/css_id_class.asphttp://w3schools.com/css/css_syntax.asphttp://w3schools.com/css/css_intro.asphttp://w3schools.com/css/default.asphttp://www.stumbleupon.com/submit?url=http://www.w3schools.com/css/css_margin.asp%26title%3DCSS%20Marginhttp://digg.com/submit?url=http://www.w3schools.com/css/css_margin.asp&title=CSS%20Marginhttp://www.reddit.com/submit?url=http://www.w3schools.com/css/css_margin.asphttp://delicious.com/save?v=5&noui&jump=close&url=http://www.w3schools.com/css/css_margin.asp&title=CSS%20Marginmailto:?&subject=CSS%20Margin&body=Take%20a%20look%20at%20this%20page%20at%20W3Schools.com:%20http://www.w3schools.com/css/css_margin.asphttp://twitter.com/home?status=Currently%20reading%20http://www.w3schools.com/css/css_margin.asphttp://www.facebook.com/sharer.php?u=http://www.w3schools.com/css/css_margin.asphttp://adclick.g.doubleclick.net/aclk?sa=L&ai=BRJ2YFP39UfnCMIuBiAer7oHABY_fz4gDAAAAEAEg5-j6ATgAWI_--Y1IYOXC5IOkDrIBDXczc2Nob29scy5jb226AQlnZnBfaW1hZ2XIAQnaASdodHRwOi8vdzNzY2hvb2xzLmNvbS9jc3MvY3NzX21hcmdpbi5hc3CpAugYxmWcmoY-wAIC4AIA6gIaLzE2ODMzMTc1L1RvcExlZnRSZWN0YW5nbGX4AoHSHpADmgiYA8gGqAMB0ASQTuAEAaAGFg&num=0&sig=AOD64_0Lw8iJxTv9w4CX5NGnRBItPo5cfA&client=ca-pub-3440800076797949&adurl=http://w3schools.com/cert/default.asphttp://w3schools.com/about/default.asphttp://w3schools.com/forum/default.asphttp://w3schools.com/sitemap/default.asp#exampleshttp://w3schools.com/sitemap/default.asp#referenceshttp://w3schools.com/sitemap/default.asphttp://w3schools.com/sql/default.asphttp://w3schools.com/php/default.asphttp://w3schools.com/aspnet/default.asphttp://w3schools.com/xml/default.asphttp://w3schools.com/jquery/default.asphttp://w3schools.com/js/default.asphttp://w3schools.com/css/default.asphttp://w3schools.com/html/default.asphttp://w3schools.com/default.asphttp://www.w3schools.com/ -
8/12/2019 CSS Margin
2/2
Top 10 Tutorials
HTML Tutorial
HTML5 Tutorial
CSS Tutorial
CSS3 Tutorial
JavaScript Tutorial
jQuery Tutorial
SQL Tutorial
PHP Tutorial
ASP.NET TutorialXML Tutorial
Top 10 References
HTML/HTML5 Reference
CSS 1,2,3 Reference
CSS 3 Browser Support
JavaScript
HTML DOM
XML DOM
PHP Reference
jQuery Reference
ASP.NET ReferenceHTML Colors
Examples
HTML Examples
CSS Examples
XML Examples
JavaScript Examples
HTML DOM Examples
XML DOM Examples
AJAX Examples
ASP.NET Examples
Razor ExamplesASP Examples
SVG Examples
Quizzes
HTML Quiz
HTML5 Quiz
XHTML Quiz
CSS Quiz
JavaScript Quiz
jQuery Quiz
XML Quiz
ASP Quiz
PHP QuizSQL Quiz
Color Picker
Statistics
Browser StatisticsBrowser OS
Browser Display
W3Schools is optimized for learning, testing, and training. Examples might be simplified to improve reading and basic understanding.Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content.
While using this site, you agree to have read and accepted our terms of use and privacy policy.Copyright 1999-2013 by Refsnes Data. All Rights Reserved.
http://w3schools.com/about/about_copyright.asphttp://w3schools.com/about/about_privacy.asphttp://w3schools.com/about/about_copyright.asphttp://w3schools.com/browsers/browsers_display.asphttp://w3schools.com/browsers/browsers_os.asphttp://w3schools.com/browsers/browsers_stats.asphttp://w3schools.com/tags/ref_colorpicker.asphttp://w3schools.com/quiztest/quiztest.asp?qtest=SQLhttp://w3schools.com/quiztest/quiztest.asp?qtest=PHPhttp://w3schools.com/quiztest/quiztest.asp?qtest=ASPhttp://w3schools.com/quiztest/quiztest.asp?qtest=XMLhttp://w3schools.com/quiztest/quiztest.asp?qtest=jQueryhttp://w3schools.com/quiztest/quiztest.asp?qtest=JavaScripthttp://w3schools.com/quiztest/quiztest.asp?qtest=CSShttp://w3schools.com/quiztest/quiztest.asp?qtest=XHTMLhttp://w3schools.com/quiztest/quiztest.asp?qtest=HTML5http://w3schools.com/quiztest/quiztest.asp?qtest=HTMLhttp://w3schools.com/svg/svg_examples.asphttp://w3schools.com/asp/asp_examples.asphttp://w3schools.com/aspnet/webpages_examples.asphttp://w3schools.com/aspnet/aspnet_examples.asphttp://w3schools.com/ajax/ajax_examples.asphttp://w3schools.com/dom/dom_examples.asphttp://w3schools.com/htmldom/dom_examples.asphttp://w3schools.com/js/js_examples.asphttp://w3schools.com/xml/xml_examples.asphttp://w3schools.com/css/css_examples.asphttp://w3schools.com/html/html_examples.asphttp://w3schools.com/tags/ref_colornames.asphttp://w3schools.com/aspnet/webpages_ref_classes.asphttp://w3schools.com/jquery/jquery_ref_selectors.asphttp://w3schools.com/php/php_ref_array.asphttp://w3schools.com/dom/dom_nodetype.asphttp://w3schools.com/jsref/default.asphttp://w3schools.com/jsref/default.asphttp://w3schools.com/cssref/css3_browsersupport.asphttp://w3schools.com/cssref/default.asphttp://w3schools.com/tags/default.asphttp://w3schools.com/xml/default.asphttp://w3schools.com/aspnet/default.asphttp://w3schools.com/php/default.asphttp://w3schools.com/sql/default.asphttp://w3schools.com/jquery/default.asphttp://w3schools.com/js/default.asphttp://w3schools.com/css3/default.asphttp://w3schools.com/css/default.asphttp://w3schools.com/html/html5_intro.asphttp://w3schools.com/html/default.asphttp://w3schools.com/cssref/pr_margin-top.asphttp://w3schools.com/cssref/pr_margin-right.asphttp://w3schools.com/cssref/pr_margin-left.asphttp://w3schools.com/cssref/pr_margin-bottom.asphttp://w3schools.com/cssref/pr_margin.asphttp://w3schools.com/css/tryit.asp?filename=trycss_margin-bottom_percenthttp://w3schools.com/css/tryit.asp?filename=trycss_margin-top
