How to set CSS attributes to default values for a specific element (or prevent inheritance)

Question

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?

Example:

CSS:

.navigation input {
    padding: 0;
    margin: 0 30em;
}

HTML

<div class="navigation">
    Some text: <input type="text" name="one" />
    More text: <input type="text" name="two" />
    <!-- The next input, I want it to be as browser-default -->
    <div class="child">
        <input type="text" name="three">
    </div>
</div>

Here, by browser-default I mean I want it to look exactly as if no CSS at all was applied to that element.

Here I'm using an input 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 reset it to its defaults.

Different elements have different default attributes like padding when they are not set. For example, a button that has a padding of 0 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?

Thanks in advance for any comments!

Answer 1

in your case you can use that :

.navigation input {    
    all: initial;
}

it will revert all attibutes of your input to initial value.

source : http://www.w3schools.com/cssref/css3_pr_all.asp