By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,442 Members | 1,368 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,442 IT Pros & Developers. It's quick & easy.

How do I set the spacing of the top of a div in a div element

JnrJnr
P: 88
Hi people,
How do I set the spacing of the top of a div from the div that contains it? Can someone please help me with the css code to do so.

Expand|Select|Wrap|Line Numbers
  1. <div id="outer">
  2.  <div> id="inner">
  3.  </div>
  4. </div>
Aug 7 '11 #1

✓ answered by Death Slaught

Oops, sorry I was in hurry when I replied to this - at an Orthodontist. The margins are collapsing. This means that the inner division's margin is being added to its parent's margin. So even if you added margin-top: 15px; to the outer division nothing would change. This is because it's the same margin. You can read more about that here.

Anyways, you can either double the margin for the inner division, or continue using padding. Keep in mind that padding starts on the outer edge of the element's content, not the element. So to replicate margin correctly, the padding-top: 15px; should be in your outer division's CSS rule.

Regards
Death

Share this Question
Share on Google+
8 Replies


Rabbit
Expert Mod 10K+
P: 12,430
You could use padding on the outer div, margin on the inner div, relative positioning or absolute positioning. There are many choices.
Aug 7 '11 #2

P: 2
As Rabbit said, you could apply padding (spacing on the inside) to the outer div, and then margins (spacing on the outside) to the inner div.

Try this:

HTML
Expand|Select|Wrap|Line Numbers
  1. <html>
  2.     <head>
  3.         <title>Title</title>
  4.         <link rel="stylesheet" type="text/css" href="index.css" />
  5.     </head>
  6.  
  7.     <body>
  8.         <div id="outer">
  9.             <div id="inner">
  10.                 <p>Some text...</p>
  11.             </div>
  12.         </div>
  13.     </body>
  14. </html>
  15.  

CSS
Expand|Select|Wrap|Line Numbers
  1. #outer {
  2.     width: 350px;
  3.     margin: 0 auto 0 auto;
  4.     padding: 15px;
  5.     border: 1px solid #a4a4a4;
  6. }
  7. #inner {
  8.     margin: 15px;
  9.     padding: 0;
  10.     border: 1px solid #a4a4a4;
  11. }
  12.  
Aug 8 '11 #3

JnrJnr
P: 88
Thanks guys. I wanted my outer div to stay as it is and just the inner div should come down 15px.
I seem to have come right with padding-top:15px; on the inner div. That doesnt really make sense to me. I seem to be struggling with the css code for Firefox after always working on css for IE. Can someone explain to me whats going on?
This works for IE but not for Firefox:
Expand|Select|Wrap|Line Numbers
  1. #outer {
  2.         height: 49px;
  3.     background-position: center;
  4.     background-repeat:no-repeat;
  5.     background-image:url(url...);    
  6. }
  7. #inner {
  8.         margin-top 15px;
  9.         width:900px;
  10.     margin-left:auto;
  11.     margin-right:auto;
  12. }    
This works for IE and Firefox:
Expand|Select|Wrap|Line Numbers
  1. #outer {
  2.         height: 49px;
  3.     background-position: center;
  4.     background-repeat:no-repeat;
  5.     background-image:url(url...);    
  6. }
  7. #inner {
  8.         padding-top 15px;
  9.         width:900px;
  10.     margin-left:auto;
  11.     margin-right:auto;
  12. }    
  13.  
Aug 8 '11 #4

Death Slaught
100+
P: 1,137
Make sure that you are using a doctype. Firefox is displaying what you told it to, and it's doing so correctly. IE places margin before the border in the box model.

If you use margin-top instead of padding-top, then it should display the same in both browsers as long as the height of #inner is not exceeding the height set for #outer.

Expand|Select|Wrap|Line Numbers
  1. #inner { 
  2.         width: 900px; 
  3.         margin: 15px auto;
  4. }   
Always use Firefox as the initial test browser, follow it with all other modern browsers, and then test in IE.

Regards
Death
Aug 8 '11 #5

JnrJnr
P: 88
Hi Death, I am using a doctype. The inner div's height is less than the outer divs's height.

If I use margin-top instead of padding-top (in the inner div) then the outer div moves down in pixels. If I use padding-top (in the inner div) then the inner div moves down (which I want).

The only way this makes sense right now is if the inner div's padding-top is refering to the outer div's top padding that contains the inner div. ?
Aug 8 '11 #6

P: 1
Give the inner div a margin of 5px;
here
margin:5px 5px 5px 5px;

need more tips check yvenspj.com
Aug 8 '11 #7

Death Slaught
100+
P: 1,137
Oops, sorry I was in hurry when I replied to this - at an Orthodontist. The margins are collapsing. This means that the inner division's margin is being added to its parent's margin. So even if you added margin-top: 15px; to the outer division nothing would change. This is because it's the same margin. You can read more about that here.

Anyways, you can either double the margin for the inner division, or continue using padding. Keep in mind that padding starts on the outer edge of the element's content, not the element. So to replicate margin correctly, the padding-top: 15px; should be in your outer division's CSS rule.

Regards
Death
Aug 8 '11 #8

JnrJnr
P: 88
Hi Death, Thanks for the site link.
I think I understand a little more and I will check more into the site.
Aug 9 '11 #9

Post your reply

Sign in to post your reply or Sign up for a free account.