我无法在我的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
答案 0 :(得分:0)
使用背景图片时。其问题归因于图像尺寸比。
您必须使用CSS中的background-size:cover属性。
还要使用适当的背景位置,以确保木槌位于页面的底部中央。
答案 1 :(得分:0)
* { margin: 0; padding: 0; }
被浏览器覆盖。
尝试
html,body{
margin:0;
padding:0;
}
答案 2 :(得分:0)
用户代理样式表将覆盖自定义样式。您可以在普通的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'))
答案 3 :(得分:0)
所有浏览器都使用不同的默认边距,这导致网站在其他浏览器中看起来有所不同。
Enter first name: janee
Enter last name: denver
['n', 'e', 'e']
是*
,意味着wildcard
存在于我们的网站中(考虑为universal selector),因此我们将网站中的每个元素都设置为< strong>零利润和零填充,以使该网站在每个浏览器中看起来都一样。
如果您的样式未得到应用,则可以使用all elements
覆盖样式,
!important
答案 4 :(得分:0)
我试图在我的 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
解决了该问题。
答案 5 :(得分:0)
如果您使用 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;