Jump to content
Sign in to follow this  
gigman7

div margin

Recommended Posts

I've created a div over another div. The top div has a margin-bottom: 0px; The bottom div has a margin-top: 0px;

Why is there about 15 px between them?

Edited by gigman7

Share this post


Link to post
Share on other sites

btw instead of using a png  for the background to your nav ,you could use a css linear gradient and then with a border 1px solid white for the top

Share this post


Link to post
Share on other sites
20 hours ago, davep said:

btw instead of using a png  for the background to your nav ,you could use a css linear gradient and then with a border 1px solid white for the top

Being a bit pedantic but you can do all that just the linear gradient with a hard stop.  Removes the need for a border taking up space.

Edited by rbrtsmith

Share this post


Link to post
Share on other sites
1 hour ago, rbrtsmith said:

Being a bit pedantic but you can do all that just the linear gradient with a hard stop.  Removes the need for a border taking up space.

nothing wrong with a bit of pedantism :) i did think about that after posting actually but didn't want to hog all the glory ;)

 

Share this post


Link to post
Share on other sites

Why did the creators of the css world not make a margin 0 actually be 0? I'm still having trouble with a margin-bottom:0 and a margin-top:0 not be margins of 0. I guess logic wasn't something they were considering.

If you look on my vacation guide page, there's a big gap between the top nav and the main content.

Share this post


Link to post
Share on other sites
8 hours ago, gigman7 said:

Why did the creators of the css world not make a margin 0 actually be 0? I'm still having trouble with a margin-bottom:0 and a margin-top:0 not be margins of 0. I guess logic wasn't something they were considering.

If you look on my vacation guide page, there's a big gap between the top nav and the main content.

By default all browsers have their own slightly quirky display, for example the body has a margin as standard. If you're having trouble I'd suggest looking with developer tools in Chrome as it will highlight issues.

Taking the issue with margin, it can be written many ways, e.g. these are all the same;

.margin { margin-top: 10px; margin-bottom: 10px; margin-left: 15px; margin-right: 15px; }
.margin { margin: 10px 15px 10px 15px; } /* top / right / bottom / left */
.margin { margin: 10px 15px; } /* top and bottom / left and right */

with your css you could write for instance ...

header {
	width: 70%;
	margin: 0 auto;
	padding-top: 0;
}

instead of

header {
	width: 70%;
	margin: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	padding-top: 0;
}

 

Share this post


Link to post
Share on other sites
On 7/11/2018 at 12:36 AM, gigman7 said:

Why did the creators of the css world not make a margin 0 actually be 0? I'm still having trouble with a margin-bottom:0 and a margin-top:0 not be margins of 0. I guess logic wasn't something they were considering.

If you look on my vacation guide page, there's a big gap between the top nav and the main content.

Setting margin to zero will result in it being zero unless you are overriding it somewhere.

Why criticise the creators of CSS, when the issue you are having (no offence) is down to your own lack of understanding of the spec?

Edited by rbrtsmith

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing

    No registered users viewing this page.

  • Member Statistics

    • Total Members
      58,416
    • Most Online
      4,970

    Newest Member
    angelsphone09
    Joined
  • Forum Statistics

    • Total Topics
      65,740
    • Total Posts
      452,901
×