Hi,

 

I would like to know the basic rule of margin and padding in CSS.

 

Waiting for useful reply.

Read about the CSS box model and all will become clear

Hi,

 

Ya sure, i will read and learn from there.

 

Thanks ...........

In addition to the above link this will need careful study:

http://www.w3.org/TR/CSS2/box.html

 

One basic rule to remember is that if you have a background to an element (like a div) the background will show in the padding around it but not in the margin around it.

 

There is also a double margin bug applicable to IE6 but I shouldn't worry about that now as IE6 has so little use. Essentially if you have a margin on the same side as a float, ie float: left and margin-left or float: right and margin-right, IE6 will double the margin on that side.

Hi Linda. A good thing to memorize is also that your padding wil be added to your width and height properties. Eg If you have an element with a 200 px width and you add 10px of padding on each side your element actualy takes up 220px. So padding can sometimes break your design regarding floating coloums ect.

@Nillervision,

 

 

Thanks for your reply. Its really simple to learn from your explanation there.

Hi Linda. A good thing to memorize is also that your padding wil be

added to your width and height properties. Eg If you have an element

with a 200 px width and you add 10px of padding on each side your

element actualy takes up 220px. So padding can sometimes break your

design regarding floating coloums ect.

If you want to make things easier you can put this at the beginning of your code and your padding will be included in your width.

*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

but it is important to note that this is not the normal CSS box model and I'm not sure that it works properly in IE7.

 

 

Hi Linda. A good thing to memorize is also that your padding wil be added to your width and height properties. Eg If you have an element with a 200 px width and you add 10px of padding on each side your element actualy takes up 220px. So padding can sometimes break your design regarding floating coloums ect.

 

Yup yup yup ... many a designer driven mad by this.

Hi Linda. A good thing to memorize is also that your padding wil be added to your width and height properties. Eg If you have an element with a 200 px width and you add 10px of padding on each side your element actualy takes up 220px. So padding can sometimes break your design regarding floating coloums ect.

 

I had figured out that while coding my first webpages, but I wasn't pretty sure that was either the padding property or the margin. So If I understand well, the padding will come in addition whereas the margin won't ?

It's not really that much of a difficult concept once you can picture it.

 

The blue box is the DIV.

 

 

So lets just assume that the DIV has properties like this (which is accurate because I've measured the box).

 

div {
width: 191px; /* INTERNAL */
height: 191px; /* INTERNAL */
padding: 28px; /* INTERNAL */
border: 24px solid #ccc; /* EXTERNAL */
margin: 29px; /* EXTERNAL */
background: #8fb4de; /* INTERNAL */
}

 

Think about the width and padding as being internal (inside the box). The padding is 28px all the way around which means that there's 28px on both the left AND the right sides so along with the defined width, the total width of the box is 28px + 191px + 28px = 247px

 

The external properties however - the border and margin are not contained within the box but instead they sit just outside it. The border can be seen because it has a colour where as margins are invisible but because they do exist, they have an effect on the position of the box as well as elements surrounding it.

 

I've re-created the box with HTML and CSS on the Dabblet link below as well as created a second box without padding so that you can see how padding affects the visible width of the box/element.

 

Dabblet Example

 

Hopefully this well help improve your understanding.

 

EDIT: The background could also be considered internal as it is confined to the internal dimensions of the box (width + padding).

Edited February 25, 201313 yr by Alluziion

Thanks a lot, as usual, helpful comment with nice exemples !!! It helps me to get it better !

The background could also be considered internal as it is confined to the internal dimensions of the box (width + padding).

 

All those years ago when I first started on CSS, I initially didn't understand the reason behind using both padding and margin. Then I added a background colour + border to my div, and voilà...I was enlightened

Edited February 25, 201313 yr by andy9l

Thanks a lot, as usual, helpful comment with nice exemples !!! It helps me to get it better !

 

No problem, glad it was useful

 

 

All those years ago when I first started on CSS, I initially didn't understand the reason behind using both padding and margin. Then I added a background colour + border to my div, and voilà...I was enlightened

 

Although I didn't have the same experience (with padding/margins), I have have encountered similar situations whilst I was learning PHP and to be honest I still don't quite understand that stuff! I'm hoping to learn OOP soon so hopefully it will further my understanding but I can guarantee that I will run into situations like this many times over but learning through experimentation is the most effective way (for me at least!).