title: Container directive with padding
body: <p>Depending on the directive "navigation" people use, the page content needs to have a certain padding.</p>
  
  <p>This is done by the "content" directive, here called "container".</p>
  
  <p>The padding or margin applied to the container seems to have render problems when an element is inside the container. But no problem when only text.</p>
  
  <p>I made 2 snippets, exactly the same code except the div inside.
  The 2nd snippet don't have a left padding</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>angular.module('app', [])
  
  
  .directive('container', function(){
      
    return {
       restrict : 'E',
       link : function(scope, element){
          
         element.css('border', '1px solid red');
         element.css('padding', '100px');
         
       }
    };
    
    });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"&gt;&lt;/script&gt;
  &lt;div ng-app="app"&gt;
    
    &lt;container&gt;
      test
      &lt;/container&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>angular.module("app", [])
  
  .directive('container', function(){
  
  return {
    
    restrict : 'E',
    link : function(scope, element){
    
      element.css('border', '1px solid red');
      element.css('padding', '100px');
    
    }
    
    };
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"&gt;&lt;/script&gt;
  
  &lt;div ng-app="app"&gt;
    
    &lt;container&gt;
      &lt;div&gt;TEST &lt;/div&gt;
    &lt;/container&gt;
    
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>