Search code examples
javascripthtmlcssreactjs

Why is {{ width: "100vw", height: "100vh"}} bigger than my browser window?(margin:0 not being applied)

I made a map with {{ width: "100vw", height: "100vh"}}, and it is bigger than my browser window.

<div id="map" style={{ width: "100vw", height: "100vh", margin: "0", padding: "0"}}></div>

I added border: "1px solid black" to see what is the problem, and this is what I saw:

enter image description here

As you can see, there is black border line around the map, and then white space surrounding it too. Why does margin still exist when I explicitly applied it to 0?

Whole code as reference:

export default function Home(props){
  useEffect(() => {
    let container = document.getElementById('map');
    let options = {
      center: new window.kakao.maps.LatLng(33.450701, 126.570667),
      level: 3
    };
  
    let map = new window.kakao.maps.Map(container, options);
  
  }, [])
  return (
    <>
    <div id="map" style={{ width: "100vw", height: "100vh", margin: "0", padding: "0", border: "1px solid black"}}></div>
    </>
  )
}
Solution

  • Browser default styles include spacing for those elements, so you have to remove margin and padding from the <html> and <body> elements in your Css:

    html,
body {
   margin: 0;
   padding: 0;
}