Why are my div's acting like I specified a centimeter and a half margin-top/margin-bottom?

Vote count:

0

I'm working on an AngularJS app and am experiencing unwanted whitespace.

        <div class='user' ng-repeat='session in sessions'>
            <div class='text' ng-bind='monologues[session][0]'></div>
            <div class='timestamp' ng-bind='monologues[session][1] | to_locale'></div>
        </div>

I specify a min-height for div.user (dynamically calculated with jQuery), and no height or margin for div.text or div.timestamp. Chrome's element inspector doesn't seem to turn up anything like a margin or min-height for div.text or div.timestamp. Manually specifying zero margin and min-height for div.user:

   <style type="text/css">
        div.user
            {
            overflow-y: auto !important;
            white-space: pre-wrap;
            }
        div.user div
            {
            margin: 0;
            min-height: 0;
            }
        input[type='text']
            {
            width: 100%;
            }
        textarea
            {
            width: 100%;
            height: 150px;
            }
    </style>

The page uses H5BP CSS, but commenting the includes on that file do not change the margins around the two inner div's to div.user.

Are there other things that could be giving me unwanted margin-like behavior?

asked 41 secs ago

JonathanHayward

1,327