I'm currently developing an AngularJS application and I've encountered some issues with unnecessary 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>
As I set a min-height for the div.user element (calculated dynamically using jQuery), I noticed that there is no height or margin specified for the div.text or div.timestamp elements. Upon inspecting these elements in Chrome's developer tools, I couldn't find any margin or min-height properties. Even after manually setting the margin and min-height values to zero for the div.user element:
<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>
Although the page utilizes H5BP CSS, even commenting out those includes didn't solve the issue with margins around the inner divs within div.user.
Could there be other factors contributing to this unwanted margin-like behavior?