Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Darren Kynaston
PLUS
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

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

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

Omar Emara
Omar Emara
18,249 Points

Thanks you so much, Ian :)

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.

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

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