Question

我无法在我的React项目中删除这些巨大的空白。以下是我尝试过的一些解决方案。

* { margin: 0; padding: 0; }

/-/-/-/

body {
  max-width: 2040px;
  margin: 0 auto;
  padding: 0 5%;
  clear: both;
}

我尝试了所有变化。我唯一会影响CSS明智的安装依赖项是bootstrap，我认为不是这样。我尝试将max-width调整为2040px的值只是为了测试它是否可以工作，并且似乎可以设置宽度的限制。帮助将不胜感激。

我还应该提到，这在整个页面上都是持久的。此问题不仅限于我在css文件中链接的背景图片 White Margins

Answer 1

使用背景图片时。其问题归因于图像尺寸比。

您必须使用CSS中的background-size：cover属性。

还要使用适当的背景位置，以确保木槌位于页面的底部中央。

Answer 2

* { margin: 0; padding: 0; }被浏览器覆盖。

尝试

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

Answer 3

用户代理样式表将覆盖自定义样式。您可以在普通的html和css中使用！important覆盖

最好让用户反应间距库，而不是覆盖用户默认样式表https://material-ui.com/system/spacing/

或者您可以使用以下

<body id="body">
<div id="appRoot"></div>
</body>

样式表

body
  margin: 0
  padding: 0
button
  padding: 10px 20px 
  border-radius: 5px
  outline: none

反应JS代码块

class A extends React.Component{  
  componentWillMount(){
    document.getElementById('body').className='darktheme'
  }
    componentWillUnmount(){
    document.getElementById('body').className=''
  }
  render(){
    return (
      <div> Component A </div>
    )
  }
}
class App extends React.Component{  
  constructor(){
    super()
    this.state = {
      isAMount: false
    }
  }

  handleClick(){
    this.setState({
      isAMount: !this.state.isAMount
    })
  }

  render(){
    return (
    <div> 
        <button onClick={this.handleClick.bind(this)}> Click Me</button> 
        <div> App </div>
        <hr />
        <div> {this.state.isAMount && <A /> } </div>
      </div>
    )
  }
}
ReactDOM.render(<App />, document.getElementById('appRoot'))

Answer 4

所有浏览器都使用不同的默认边距，这导致网站在其他浏览器中看起来有所不同。

Enter first name: janee Enter last name: denver ['n', 'e', 'e']是*，意味着wildcard存在于我们的网站中（考虑为universal selector），因此我们将网站中的每个元素都设置为< strong>零利润和零填充，以使该网站在每个浏览器中看起来都一样。

如果您的样式未得到应用，则可以使用all elements覆盖样式，

!important

Answer 5

我试图在我的 React 应用程序中添加背景图片，但 React 在顶部和左侧留下了一些空白。

const useStyles = makeStyles((theme) => ({
      background: {
        backgroundImage:  `url(${Image})`,
        backgroundPosition: 'center',
        backgroundSize: 'cover',
        backgroundRepeat: 'no-repeat',
        width: '100vw',
        height: '95vh',
      }

阅读文档后，我意识到不是边距，而是图像的定位。将 position:fixed 设置为 top:0 和 left:0 解决了该问题。

Answer 6

如果您使用 create-react-app 创建它，则可能会有一个文件 public/index.html。

在根周围有一个标签，React 将在其中注入您的应用程序。

通常浏览器样式表将 <body> 的边距设置为 8px。这很可能是您正在努力摆脱的应用程序周围的白边。

要删除它，一种选择是打开 public/index.html 并使用如下内联样式将边距设置为 0：

<body style=margin:0>

如果您使用 @emotion/react 进行样式设置，您也可以（仍然假设 public/index.html 中有这个 body 标签）将其保留为 <body> 并使用 {{3} } 来定义 <body> 的样式。您的 App.js 中的类似内容：

function App() {
  return (
    <div>
      <Global
        styles={css`
          body {
            margin: 0;
          }
        `}
      />
      <Your />
      <Other />
      <Components />
    </div>
  );
}

export default App;

无法删除React Web App上的边距

6 个答案: