1

I have this very simple component in React. I am somewhat new to react.I tried everything to remove the white space but am not able to figure out what is causing the white space to appear. Only margin negative seems to be aviable solution but I know thats not appropriate to use please tell me how to fix it
import React, { Component } from 'react';

class Shopdetail extends Component{
    constructor(props){
        super(props);
        this.state={            
            data: this.props.data,
            redirect:false

        };        
    }
    componentDidMount(){
        console.log(this.props.match.params.idUser);
    }
        render(){
            return(
                <div style={{ verticalAlign: 'top',margin:'0',clear:'both'}}>
                    <div style={{background:'#cc5',width:'100%',height:'100px',verticalAlign: 'top',boxSizing: 'border-box',clear:'both',padding:'0'}}>Hey</div>
                </div>

            )
        }
}
export default Shopdetail

Here is screenshot this is screenshot

hearty
  • 691
  • 5
  • 10
  • 15

3 Answers3

2

Remove margin from body or simply add 

body{
   margin : 0px !important;
}
Nishant Dixit
  • 5,388
  • 5
  • 17
  • 29
0

Every browser has default stylesheet for every element.

Think about, how font size of h1 tag bigger than p tag...!! This stylesheet is called User Agent StyleSheet.

This User Agent StyleSheet has default margin & padding for every tag (diffrent padding & margin for diffrent tag).

A Better way is alway reset those padding & margin by universal selection after starting project.

*,
*:after,
*:before {
  margin:0;
  padding:0;
  box-sizing:border-box;
}
Ritwick Dey
  • 18,464
  • 3
  • 24
  • 37
-1

Try using this css reset... add to the top of your css

<style>
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
</style>
mattshade
  • 1
  • 2