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 July 8, 20188 yr by gigman7

Impossible to answer this without seeing the page.

Sounds inherited, div by default is block with no margin. If you post up some code it'll help narrow it down

aspecialspot.com

between the image and nav

Edited July 8, 20188 yr by gigman7

I'm 99% sure it's your nav. By default a ul has a margin and padding. Try;

header nav ul {	margin: 0; padding: 0; }

 

That took most of it out. Now there's about 2 px still there.

.logo img{display:block;}

 

That got it. Thanks!

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

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 July 9, 20188 yr by rbrtsmith

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

 

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.

Also, my content area isn't filling again.

Edit: Got that part.

Edited July 11, 20188 yr by gigman7

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;
}

 

There is still one pixel left. How do I get rid if it?

Nevermind. Got it.

Edited July 11, 20188 yr by gigman7
Solved

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 July 12, 20188 yr by rbrtsmith