How to make an AppBar Component fill all div's width and 10% of its height?

Question

class MyStupidComponent extends React.Component {
    render() {
        return (
            <div style={{width: "100%"}}>
                <div style={{height: "10%"}}>
                    <AppBar title="MY APP" />
                </div>
            </div>
        );
    }
}

ReactDOM.render(<MyStupidComponent />, document.getElementById("stupid-app"));

Trying the jsx above AppBar component should fill all width and 10% of height from its div parent but it doesn't happen and it is shown a weird blank space on its top, left and right corner:

What is wrong with my component's style?

I am using the awesome Material UI's React.js Components

Answer 1

Set margin: 0; to body in order to get rid of the white space above.

This problem is caused by the browser. Every browser has its own default user agent stylesheet, you can see it in your dev-tooling.

Like below

body - User Agent Stylesheet
   display: block;
   margin-top: 8px;
   margin-right: 8px;
   margin-bottom: 8px;
   margin-left: 8px;

Without any more details that explains your problem, such as any style in parent (#stupid-app)?

You can also prevent this problem occurred by using reset.css or normalize.css