title: css border going from the origin of the tag rather than from the edge of the tag
body: <p>I have a general question on design and practices for overcoming layout problems. Let's say I have this html:</p>
  
  <pre><code>&lt;div class="info"&gt;
      &lt;p&gt;some stuff here for the paragraph&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and I have this css:</p>
  
  <pre><code>.info {
      width: 10%;
      padding-left: 15%;
      border: dashed;
  }
  </code></pre>
  
  <p>My question is that the output of this will generate something that has a bigger border than  necessary, are there design practices to avoid this kind of problem?</p>