CSS Margin
CSS Margin with Programming Examples
CSS Margin
In this tutorial we will learn the CSS Margin with examples of all the programming.
The uses of CSS Margin to create space between the line and around or outside of an element.
margin-top margin-bottom margin-left margin-right margin: auto
CSS Margin – Individual Sides
The following properties of margin set the length of the margin each side, The margin used all sides of an element (top, bottom, left and right), following the properties.
- margin-top: This property set the margin area on top of the elements.
- margin-bottom: This property set the margin area at the bottom of an elements.
- margin-left: Sets margin area on the left side of an elements.
- margin-right:
This property set the margin area on the right side of an elements.
Following are valid value to set Margin-
- <percentage>: Here we put the percentage value to set the margin of an elements. For example; {margin-top: 60%;}
- <length>: through this property we put the length value to set margin of an elements such as px, cm etc.
- auto: select a suitable margin to use. For example, in some time we want the elements is in center, that time we put the auto value.
- Inherit: It specific to take value of the property from its parent element.
-
Initial: The usage of the initial value depends on whether a property is inherited or not. The initial value is used only on the root element.
Now here we see the example of all the margin sides (top, bottom, left and right).
Programming Example of all Margin sides,
<!DOCTYPE html> <html lang="en"> <head> Â <meta charset="UTF-8"> Â <meta http-equiv="X-UA-Compatible" content="IE=edge"> Â <meta name="viewport" content="width=device-width, initial-scale=1.0"> Â <title>Margin Sides</title> Â <style type="text/css"> Â .margin-T{margin-top: 40px; Â Â Â Â Â Â background: aquamarine; Â Â Â Â Â Â border: 2px solid blue;} Â .margin-B{margin-bottom: 30px; Â Â Â Â Â Â background:blueviolet; Â Â Â Â Â Â border: 2px solid red;} Â .margin-R{margin-right: 30px; Â Â Â Â Â Â background: yellow; Â Â Â Â Â Â border: 2px solid green;} Â .margin-L{margin-left: 30px; Â Â Â Â Â Â background: yellow; Â Â Â Â Â Â border: 2px solid green;} Â </style> </head> <body> <div class="margin-T">Here used the margin on top.</div> <div class="margin-B">Hare used the margin on bottom.</div> <div class="margin-R">Here used the margin on right.</div> <div class="margin-L">Here used the margin on right.</div> </body> </html> |
Output of above Programming Examples,
 |
Above you see the first line take margin in top side, second line take margin on bottom, third line take margin on right side and fourth line take margin area on right side.
Horizontally Centering an Element (auto)
Here we use the auto CSS margin property to centering the elements, margin: auto declare to “0” no margin, the CSS declaration center the elements.
Programming Example of Auto Margin
<!DOCTYPE html> <html lang="en"> <head>  <meta charset="UTF-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>Margin Sides</title>  <style type="text/css">  div{margin: auto;   background: aquamarine;   border: 2px solid blue;   height: 100px;   width: 200px;}     </style> </head> <body> <div>Here used the margin auto.   The<b>{margin: auto}:</b> CSS declaration   the element is on the center. </div> </body> </html> |
Output of above programming example,
 |
Above you can see the output of programming the division is on center because we put the auto value in margin.
CSS Inherit & Initial Value
The Inherit Value is a global value it works on almost all of the CSS properties. It is specified to take the value of the property from its parent element. We can apply this any CSS property, including the CSS shorthand all. And the Initial value is only used on the root element.
Inheritance is always from the parent element in the documents, even when the parent element is not the containing block.
Below is an example of a child element inheriting margin from the parent element.
Programming Example Inherit and Initial Value
<!DOCTYPE html> <html lang="en"> <head>  <meta charset="UTF-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>Margin Sides</title>  <style type="text/css">  div#parent{    margin-left: 50px;    border: 1px solid green;    background: bisque;  }  b{color: blue;}  p#child{    margin-left: inherit;    margin-bottom: initial;  }  </style> </head> <body> <div id="parent"> <p id="child"><u><b>StudyMuch Coding</b></u>     Here the element's left margin is     inherited and bottom margin is initial from its parent element.</p> </div> </body> </html> |
Output of above programming example,
 |
Above you can see the output of above example, we use the Inherited and Initial value on margin of child element.
Here the element’s left margin is inherited and bottom margin is initial from its parent element.
In this tutorial we learned the CSS Margin (margin: top, bottom, right, left, auto, initial and inherited) with the programming examples of all the margins. I hope you all learned this tutorial with enjoyed, if you have any doubt comment without any hesitation. In next tutorial of CSS will learn a new topic.
Also Read-
- Create a stylish Contact Form with HTML & CSS.
- Create a stylish Sign-Up Page with HTML & CSS.
- Learn CSS border with programming example.
- Learn HTML Form full tutorial with example.
- Learn HTML Table full tutorial with example.
- Learn HTML Video with example.
- Learn HTML Image with example.
- Learn HTML Audio with full tutorial.
29 Comments
zoritoler imol · July 2, 2022 at 1:30 am
I like what you guys are up also. Such smart work and reporting! Keep up the excellent works guys I¦ve incorporated you guys to my blogroll. I think it’ll improve the value of my web site 🙂
graliontorile · August 11, 2022 at 3:52 am
I’ve been absent for a while, but now I remember why I used to love this web site. Thank you, I’ll try and check back more frequently. How frequently you update your site?
news · November 21, 2022 at 10:33 am
Excellent post. I was checking constantly this blog and I am impressed! Very helpful information particularly the final phase 🙂 I handle such information much. I used to be looking for this particular info for a very long time. Thank you and best of luck.
Kattie · November 26, 2022 at 8:22 pm
Hello outstanding website! Does running a blog suchh
aas thi takke a great deal off work? I’ve virtually no knowledge of programming buut I hhad been hoping to start my
oown blog soon. Anyway, if you havee anyy ideas orr techniques for new blog owners please share.
I undetstand this is off topic but I simpky nereded tto ask.
Thanks!
Jetta Halat · December 8, 2022 at 9:46 pm
I really enjoyed reading your post and it helped me a lot.
Isiah Waltos · December 10, 2022 at 10:52 pm
Dude these articles were really helpful to me. Thanks a lot.
Hollis Keats · December 12, 2022 at 12:56 am
Thank you for writing this post. I like the subject too.
marketing agency bali · December 22, 2022 at 2:45 am
Hi there! I just would like to give an enormous thumbs up for the good data you may have right here on this post. I will likely be coming again to your weblog for extra soon.
fabric · December 25, 2022 at 11:09 am
We are a group of volunteers and opening a new scheme in our community. Your site provided us with valuable info to work on. You have done a formidable job and our entire community will be thankful to you.
Dustin Eberling · December 28, 2022 at 1:42 am
Thank you for your help and this post. It’s been great.
Jospeh Durk · December 28, 2022 at 3:26 am
Thank you for writing such a great article. It helped me a lot and I love the subject.
Clóvis de Barros Filho · December 31, 2022 at 8:38 pm
I really appreciate this post. I have been looking everywhere for this! Thank goodness I found it on Bing. You have made my day! Thx again
Mui Guilmain · January 2, 2023 at 4:07 am
Can you write more about it? Your articles are always helpful to me. Thank you!
Alan Gutmann · January 2, 2023 at 4:31 am
Thanks for your help and for posting this. It’s been wonderful.
Harland Nagorski · January 16, 2023 at 9:36 am
You should participate in a contest for among the finest blogs on the web. I will suggest this web site!
curso sustentabilidade - senac · January 20, 2023 at 6:10 pm
I am not sure where you are getting your information, but great topic. I needs to spend some time learning much more or understanding more. Thanks for fantastic information I was looking for this information for my mission.
Nolopecia · January 21, 2023 at 4:15 am
Thanks a lot for the helpful post. It is also my belief that mesothelioma cancer has an particularly long latency period of time, which means that indication of the disease may well not emerge till 30 to 50 years after the original exposure to mesothelioma. Pleural mesothelioma, which can be the most common type and has an effect on the area about the lungs, may cause shortness of breath, chest pains, and also a persistent coughing, which may result in coughing up body.
cheap flight tickets · January 23, 2023 at 7:56 pm
Hey there, You have done a fantastic job. I will definitely digg it and for my part suggest to my friends. I’m sure they will be benefited from this site.
Afwasrek · January 24, 2023 at 8:19 pm
There are some attention-grabbing closing dates in this article but I don?t know if I see all of them middle to heart. There is some validity however I will take hold opinion until I look into it further. Good article , thanks and we would like more! Added to FeedBurner as properly
curso de sinuca curitiba · February 3, 2023 at 4:46 pm
Wonderful site. A lot of useful information here. I?m sending it to a few friends ans also sharing in delicious. And naturally, thanks for your sweat!
curso de caligrafia pdf grátis · February 3, 2023 at 7:08 pm
I?ve read a few good stuff here. Certainly worth bookmarking for revisiting. I surprise how much effort you put to create such a magnificent informative web site.
neurotonix · February 4, 2023 at 7:37 am
These days of austerity and also relative stress about having debt, most people balk resistant to the idea of using a credit card to make acquisition of merchandise or maybe pay for a vacation, preferring, instead just to rely on a tried in addition to trusted technique of making payment – raw cash. However, if you possess cash available to make the purchase 100 , then, paradoxically, that is the best time for them to use the cards for several causes.
pro dentim · February 9, 2023 at 9:56 am
Thank you for any other great post. Where else may anyone get that kind of info in such an ideal manner of writing? I’ve a presentation next week, and I’m on the search for such information.
DL Doll · February 10, 2023 at 2:44 pm
Hi there, simply became aware of your blog via Google, and located that it’s really informative. I?m gonna be careful for brussels. I?ll be grateful if you happen to continue this in future. Many folks might be benefited from your writing. Cheers!
[Pack] Livros e Guias de Medicina Autores Diversos · February 15, 2023 at 1:19 am
Thanks for your useful post. Through the years, I have come to understand that the particular symptoms of mesothelioma cancer are caused by the actual build up connected fluid between lining of your lung and the torso cavity. The sickness may start while in the chest place and propagate to other body parts. Other symptoms of pleural mesothelioma cancer include losing weight, severe respiration trouble, throwing up, difficulty eating, and puffiness of the neck and face areas. It ought to be noted that some people living with the disease tend not to experience just about any serious signs and symptoms at all.
Rateios Hotmart · February 17, 2023 at 4:39 pm
Wonderful goods from you, man. I’ve understand your stuff previous to and you are just extremely magnificent. I really like what you’ve acquired here, certainly like what you are saying and the way in which you say it. You make it entertaining and you still care for to keep it wise. I can’t wait to read much more from you. This is really a wonderful website.
Projeto Blindado Eduardo Anfilo Marcato · February 28, 2023 at 12:17 am
I just could not depart your web site before suggesting that I really enjoyed the standard information a person provide for your visitors? Is gonna be back often to check up on new posts
sandalia leve · March 25, 2023 at 3:58 am
F*ckin? amazing things here. I am very glad to see your post. Thanks a lot and i am looking forward to contact you. Will you please drop me a mail?
Anonymous · April 29, 2023 at 11:37 am
Heey there! Do yyou usse Twitter? I’d likme tto folloow yyou
if that ould be okay. I’m undoubtedly enjying ykur blog annd look fokrward to new updates.