ve741 Posted September 23, 2014 Share Posted September 23, 2014 (edited) can someone show me the code that would produce this box using only <div> css? thanks Edited September 23, 2014 by ve741 Link to comment Share on other sites More sharing options...
Ingolme Posted September 23, 2014 Share Posted September 23, 2014 Have you checked the W3Schools CSS tutorial? You can learn about boxes in CSS here: http://www.w3schools.com/css/css_boxmodel.asp Link to comment Share on other sites More sharing options...
ve741 Posted September 23, 2014 Author Share Posted September 23, 2014 (edited) 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 Link to comment Share on other sites More sharing options...
niche Posted September 23, 2014 Share Posted September 23, 2014 focus on this: http://www.w3schools.com/css/css_boxmodel.asp Link to comment Share on other sites More sharing options...
Ingolme Posted September 23, 2014 Share Posted September 23, 2014 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. Link to comment Share on other sites More sharing options...
kelly2marie Posted September 30, 2014 Share Posted September 30, 2014 <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; } Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now