CSS - Margin & Padding

Imroatush Sholihah
Sep 1, 2018 · 3 min read

Assalamualaikum, guys! Come back to my Medium again. Hoho.. And still on CSS. And right now, I gonna tell you something about Margin & Padding. But, before we enjoy the Medium, i recommend you to click follow on my profile and give some your claps for this Medium and all of my Medium as your kindness.

Don’t forget to read all of my Medium about IT, especially for programming. Enjoy my Medium!

About Margin and Padding

Margin is one of designation of space in coding for make spacing among elements. So, among elements’ll not close together.

Padding is one of designation of space inside the element. So between content and border’ll have space.

So the different between Margin and Padding is, if Margin give space outside of the element, Padding for give space inside of the element.

Place of Margin and Padding on CSS

Each of Margin and Padding have 4 type. There’re :

  • Margin/Padding-Top : for make space on top of element.

margin/padding-top : (value) ;

  • Margin/Padding-Right : for make space on right of element.

margin/padding-right : (value) ;

  • Margin/Padding-Bottom : for make space on bottom of element.

margin/padding : (value) ;

  • Margin/Padding-Left : for make space on left of elements.

margin/padding : (value) ;

And property for Margin and Padding is :

margin : (value) ;

padding : (value) ;

That’s also be a short-hand of margin. And for value of Margin and Padding property’re could just number with the unit is [ px ]- pixel :

margin : 100px ;

padding : 100px

So, it’s mean the element’ll have each 100 px margin and padding. I think it’s time to practice. See how the code i wrote on sublime :

Code on Sublime

And we’ll see the result on browser looks like :

Result on Browser of code above

So we can see the different between Margin and Padding. But i have one magic. The key is ‘ Don’t combine two elements that has Margin ‘. Example :

Code on Sublime

See, i give the class ‘withMargin1’ and ‘withMargin2’ a Margin that have 50 px of value. But we’ll see the result on browser :

Result on Browser - Look at the red mark

See between Paragraph Margin 1 and Paragraph Margin 2. There’s space but there’s no different with margin-top of Paragraph Margin 1. Why? Because if there’s two margin that meet, it’ll be combine automatically.

Yeah! That’s the magic. No, i’m kidding. Haha, sorry. That’s a code :)

So, i think enough for this chance of my Medium. I hope it’ll have many benefits. And enjoy your web design programming. See you on my next Medium!

Wassalamualaikum. ^^

Imroatush Sholihah

Written by

IDN | Islamic Development Network

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade