title: AngularJs component and padding
body: <p>I just created two dummy components in AngularJS 1.5 and I'm having an issue with my CSS. Basically, here is the output HTML:</p>
  
  <pre><code>&lt;body&gt;
      &lt;app number="5" class="ng-isolate-scope"&gt;&lt;div class="app__button___ngX_w"&gt;The value is 10&lt;/div&gt;&lt;/app&gt;
      &lt;price value="5" class="ng-isolate-scope"&gt;&lt;span class="price__button___3-PzM"&gt;The price is 5€&lt;/span&gt;&lt;/price&gt;    
  &lt;/body&gt;
  </code></pre>
  
  <p>The two classes defined on the "divs" look like this:</p>
  
  <pre><code>.app__button___ngX_w {
      width: 150px;
      border-radius: 10px;
      padding: 10px;
      border:1px solid #3e3e3e;
      background-color:#cecece;
  }
  </code></pre>
  
  <p>The second one is the same, except the background color. However, the end result is quite unexpected:</p>
  
  <p><a href="https://i.stack.imgur.com/uwgfx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uwgfx.png" alt="enter image description here"></a></p>
  
  <p>After my investigations, I noticed that if I apply the classes to the surrounding component tag and change its "display" property to "block", it works. </p>
  
  <p>However, I have no idea (and I'm not even sure it's possible) how to modify the class of the surrounding component tag, so my question is, what is the best way to avoid this to happen? Because it's quite a common scenario... </p>