为什么 {{ width: "100vw", height: "100vh"}} 比我的浏览器窗口大？（未应用边距：0）答案

【问题标题】：Why is {{ width: "100vw", height: "100vh"}} bigger than my browser window?(margin:0 not being applied)为什么 {{ width: "100vw", height: "100vh"}} 比我的浏览器窗口大？（未应用边距：0）
【发布时间】：2021-04-25 04:51:26
【问题描述】：

我用 {{ width: "100vw", height: "100vh"}} 做了一个地图，它比我的浏览器窗口大。

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

我加了border: "1px solid black"看看是什么问题，我看到的就是这个：

如您所见，地图周围有黑色边界线，周围也有空白。为什么当我显式应用到 0 时，margin 仍然存在？

整个代码作为参考：

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>
    </>
  )
}

【问题讨论】：

在我使用该样式之前，地图超出了浏览器窗口。我添加后调试。

标签： javascript html css reactjs

【解决方案1】：

浏览器默认样式包括这些元素的间距，因此您必须从 Css 中的 <html> 和 <body> 元素中删除边距和填充：

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

【讨论】：

最好将before 和after 伪元素也包含在您的CSS 重置中，例如*, *::before, *::after { margin: 0; padding: 0; }，但并非总是必要的。

【解决方案2】：

<div id="map" style={{ ... border: "1px solid black"}}></div>

你的边框1px，这意味着每边+2px。您可以尝试将 box-sizing 添加到您的 div：

box-sizing: border-box;

https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

【讨论】：

感谢您的回答。我试过了，但 React 出于某种原因不接受它。(#1 js)
boxSizing: "border-box"

【解决方案3】：

这个问题也让我很恼火。然后我尝试了“宽度：100%；”除了“宽度：100vw；”它奏效了。所以试试吧，让我知道它是否对你有用。

<div id="map" style="width: 100%; height: 100vh;"></div>

【讨论】：

这可能对你有用。但这不是正确的答案。如果它有效，这在技术上并没有错。但通常容器是嵌套的，如果您的组件所在的容器小于100vw，则使用100% 不会呈现整个浏览器宽度
几乎可以工作，但只有在将高度设置为 90vh 后才能完美契合。