Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by SABCD ABCD
SABCD ABCD
3,414 Points

A few questions on this code?

Hi guys, just wondering if you could explain some of this code to me and what it does. It doesn't seem to have a visible effect in some cases so I can't really tell what it is doing.

.group { display: table; clear: both;

In the above CSS, what does display: table do? Also, I know what clear: both does visually, but how does it set things back in order?

  • { box-sizing: border-box; }

What does border-box do exactly? In my code in seems to make the floated paragraphs justified. I am not sure if that's its purpose.

Note: If my question is not clear, let me know and I will try to explain it better. Thanks!

1 Answer

Grace Kelly
Grace Kelly
33,990 Points
Grace Kelly
Grace Kelly
33,990 Points

Hi Sanjay, your question is very clear!! I'm gonna go through each of these properties individually:

  • display: table makes the element behave like a html table element. It's frowned upon alot these days but it still has it's uses e.g making divs act like table cells

  • clear: both there's actually a very good explanation about clear: both here

  • box-sizing:border-box when you set box-sizing: border-box; on an element, the padding and border of that element no longer increase its width or its height which makes it a very handy css property!!

Hope that clears things up a bit!!

SABCD ABCD
SABCD ABCD
3,414 Points

Thanks Grace! That cleared things up perfectly!

Grace Kelly
Grace Kelly
33,990 Points
Grace Kelly
Grace Kelly
33,990 Points

No problem Sanjay! Happy coding :)