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

Darren Kynaston
PLUS
Darren Kynaston
Courses Plus Student 15,610 Points
Posted by Darren Kynaston
Darren Kynaston
Courses Plus Student 15,610 Points

CSS Transforms - White Space around <div>'s when css transforms applied - I can't remove the white space!

Firstly here's the problem in codepen: http://codepen.io/anon/pen/jPmrQr

I want to create 10 div's with transform, rotate - 5 on the top row and then 5 on the second row ( I can do this )...

BUT...

There is a white space | margin | padding between the div's that is causing space between them -

I want the div's to be FLUSH together (top, right, bottom and left) but I can't seem to make this happen at the moment. Am I missing something? Any help appreciated.

You'll see the code in codepen link: http://codepen.io/anon/pen/jPmrQr

Darren.

2 Answers

Omar Emara
Omar Emara
18,249 Points
Omar Emara
Omar Emara
18,249 Points

I'm not sure if that's exactly what you mean, but try adding float:left to the .flip-block-container class

.flip-block-container {
    position: relative;
    display: inline-block;
    border: 0;
    /*margin: 0 auto;*/
    width: 192px;
    height: 181px;
        float:left;
    cursor: pointer;

    -webkit-transition: -webkit-transform 0.6s ease-in;
            transition: transform 0.6s ease-in;
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
}
Ian Hazelton
Ian Hazelton
6,187 Points

Good work, Omar. I'd say that's a simple, elegant solution to the problem.

Omar Emara
Omar Emara
18,249 Points
Omar Emara
Omar Emara
18,249 Points

Thanks you so much, Ian :)

Darren Kynaston
Darren Kynaston
Courses Plus Student 15,610 Points
Darren Kynaston
Darren Kynaston
Courses Plus Student 15,610 Points

Thanks Omar,

Yes floating left does the trick well! and then you can manipulate the number of "boxes" aligned horizontally next to each other with a media query by setting the parent containers width accordingly for different viewport widths.

Ian Hazelton
Ian Hazelton
6,187 Points
Ian Hazelton
Ian Hazelton
6,187 Points

Mmm, I haven't worked it out yet, but It's interesting that changing .flip-block-container to display: block get's rid of the white space, but then your block is obviously going vertically.

Darren Kynaston
Darren Kynaston
Courses Plus Student 15,610 Points
Darren Kynaston
Darren Kynaston
Courses Plus Student 15,610 Points

Ian,

The white space issue is there because the divs are displayed: block. By default, browsers always place a line break before and after the <div> element (this is the issue). So the float:left works in the example as it take the block out of their ordinary position and pushes them right up next to each other. Another way to remove the white space is to remove all white space in the html mark-up so there are no spaces between the div elements

<div>text</div><div>more text</div>

You can also use a negative margin (-5px) to achieve the same effect without floating the elements if required. Article here: https://teamtreehouse.com/forum/negative-margins