code to make this box in css?

[ve741]

can someone show me the code that would produce this box using only <div> css? thanks

Edited September 23, 2014 by ve741

[Ingolme]

Have you checked the W3Schools CSS tutorial?

 

You can learn about boxes in CSS here: http://www.w3schools.com/css/css_boxmodel.asp

[ve741]

Ya I see a sample of it there but I still don't know to get rid of the space in between the top and lower box..

Edited September 23, 2014 by ve741

[niche]

focus on this:

 

http://www.w3schools.com/css/css_boxmodel.asp

[Ingolme]

Ya I see a sample of it there but I still don't know to get rid of the space in between the top and lower box..

 

If you have something like a <p> or <ul> element inside one of the boxes its default margin will be applied to its parent, making its parent separate from other boxes. This feature is called collapsing margins. The easiest fix is to set overflow: auto on the boxes.

[kelly2marie]

<div class="thumbnail"></div>

 

.thumbnail {

width: 227px;

height: 237px;

}

 

Now, if you are experiencing margin collapse or really it's an escaping margin, then you have two options.

1) Add a border around the div.

2) Add a pixel of padding on top and on the bottom.

 

Also, be sure to zero out margins and padding, typically done with a css reset, or on the body style.

 

So.......

 

body {

margin:0;

padding:0;

}

.thumbnail {

width: 227px;

height:237px;

border: 1px solid #33333;

}