title: How to set CSS attributes to default values for a specific element (or prevent inheritance)
body: <p>Given any HTML element that is a child of another element and is automatically inheriting a series of CSS attributes: how can you set one (or all) of those attributes to the default value?</p>
  
  <p>Example:</p>
  
  <p>CSS:</p>
  
  <pre><code>.navigation input {
      padding: 0;
      margin: 0 30em;
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="navigation"&gt;
      Some text: &lt;input type="text" name="one" /&gt;
      More text: &lt;input type="text" name="two" /&gt;
      &lt;!-- The next input, I want it to be as browser-default --&gt;
      &lt;div class="child"&gt;
          &lt;input type="text" name="three"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here, by <strong>browser-default</strong> I mean I want it to look exactly as if no CSS at all was applied to that element.</p>
  
  <p>Here I'm using an <code>input</code> element as an example, but I'm talking about any kind of element. I'm not asking how to set different CSS attributes to that specific element, I'm asking how to <strong>reset</strong> it to its defaults.</p>
  
  <p>Different elements have different default attributes like <code>padding</code> when they are not set. For example, a <code>button</code> that has a padding of <code>0</code> in CSS will wrap its text without any space. You can later set its padding to another value, but how would you set it to the default padding?</p>
  
  <p>Thanks in advance for any comments!</p>