标签: margin
HTML CSS 表单 - 如何使表单在页面上居中？
我制作了一个表单，试图将其置于页面中心，但它不起作用。我尝试将这 2 个 CSS 应用于它，但没有成功。
form{margin: 0 auto;}
form{margin: auto;}
我还尝试将表单封装到 div.container 中并对其应用相同的 CSS，但仍然没有任何结果。
但这有效：
{margin: 0 250px 0;}
在这里填写表格
推荐指数
解决办法
查看次数
根据浏览器窗口大小调整边距
我有一系列滚动水平布局的图像。图像之间有边距。我正在使用 jQuery 脚本，该脚本负责根据浏览器窗口大小调整图像大小。我的问题是，如何调整图像之间的边距？
我需要设计完全流畅，因此媒体查询不是这种情况下的解决方案。
HTML：
<div id="page">
<div id="header">
</div>
<div id="slides">
<div class="slide"><img src="image01.jpg" /></div>
<div class="slide"><img src="image02.jpg" /></div>
<div class="slide"><img src="image03.jpg" /></div>
....
<div class="slide"><img src="imageN.jpg" /></div>
</div>
<div id="footer">
</div>
</div>
CSS：
#slides {
width: 100%;
white-space: nowrap;
}
.slide {
display: inline-block;
margin-right: 20px;
vertical-align: top;
}
jQuery：
jQuery(document).ready(function($){
var $window = $(window),
$header = $('#header'),
$footer = $('#footer');
var getHorizontalPageHeight = function () {
return $window.height() - $header.outerHeight() - $footer.outerHeight();
};
var $slides = $('#slides'), …推荐指数
解决办法
查看次数
带边距/填充的 CSS 网格全屏
使用 CSS 网格，我需要一个带有固定页眉、导航和页脚的全屏，只有文章是 Flex 的。
但是 margin = 10px 就不行了since footer is not fixed below
如何保持全屏固定页眉、导航和页脚（只有文章是弹性的）以及边距 = 20px？
推荐指数
解决办法
查看次数
为什么顶部的边距不会改变？
我正在尝试编辑导航栏链接上的边距，但是当我更改边距时，没有任何反应。有谁知道为什么会发生这种情况？
/* Whole Page or not one specific section */
main {
text-align: center;
}
body {
max-width: 100%;
height: 100vh;
margin: 0px 0px 0px 0px;
color: #C2D3CD;
}
.topbar, nav {
background-color: #847E89;
}
/* Top Bar */
#temp-logo, #donate-top {
display: inline-block;
}
#donate-top {
float: right;
padding-right: 2%;
padding-left: 2%;
background-color: #C2D3CD;
color: #847E89;
height: 10vh;
cursor: pointer;
}
.donate-name {
padding-top: 4vh;
background-color: #C2D3CD;
border: none;
cursor: pointer;
}
#temp-logo {
padding-top: 0vh;
margin-left: 2%;
font-size: …推荐指数
解决办法
查看次数
“边框”使“背景颜色”的效果不同
这个问题似乎不像其他问题那么重要，但我想了解它 是如何工作的以及为什么会这样工作。
我们这里有一个非常简单的代码笔：
html, body {
margin: 0;
padding: 0;
}
.header {
background-color: #ccc;
/* border: 3px solid pink; */
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test1</title>
</head>
<body>
<div class="header">
<h1>Header</h1>
<h2>Subheader</h2>
</div>
</body>
</html>当边框被注释时，笔的工作方式如下：
我们可以看到，边距h1并h2没有被“背景颜色”属性着色。在这里我想‘好吧，因为它只是div.header包含的内容。
但如果我们删除评论并为其设置边框，div.header它的行为就会突然变得不同。
现在h1，h2边距成为了一部分，div.header尽管边框只是发生了变化。你能帮我解释一下这个现象吗？我知道这有一个合乎逻辑的解释。非常感谢。
推荐指数
解决办法
查看次数
如何删除 create-react-app 中的默认边距？
我使用该命令制作了一个新应用程序create-react-app。我删除了文件夹中的大部分文件src。所以现在我的文件夹看起来像这样：
index.js有
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
并App.js包括
import React from 'react'
function App() {
return (
<div className="App">
<h1>Hello World</h1>
</div>
);
}
export default App;
现在，当我运行yarn start并转到浏览器时，它显示：
问题：您可以清楚地看到“Hello World”文本的一些左边距。这是为什么？我没有包含任何 CSS 文件！另外，我该如何删除它？
推荐指数
解决办法
查看次数
推荐指数
解决办法
查看次数
<body>不从页面顶部开始
我的身体没有从主页的顶部开始(问题很明显,使用萤火虫,而不是肉眼!).任何想法？谢谢
推荐指数
解决办法
查看次数
为什么我的margin-top CSS在这种情况下不起作用？
我相信,我有这个问题是关系到margin不是崩溃在div那里面另一个div,但我可能是错的.
我希望有人可以在这方面把我推向正确的方向.
以下是我正在处理的页面中的一小段代码:
.space25 {
margin-bottom: 1.563em;
}
#menu {
text-align: center;
color: white;
margin-top: .9375em;
margin-bottom: .9375em;
}<div id="page-wrap">
<div id="header">
<div id="logo">
<img src="logohuge2.png" width="750px">
</div>
<div id="menu">
<h5><span class="btn">CURRENT WORK</span> <span class="btn-active">PRICING</span> <span class="btn">CONTACT</span></h5>
</div>
</div>
<div id="mediumtitle" class="25space">
Basic Packages</br>
</br>
</div>
</div>推荐指数
解决办法
查看次数
保证金与浮动元素一起崩溃,为什么会增加额外保证金？
更新:Firefox上不显示以下行为.
让我们从以下情况开始:
html {
background: red;
}
body {
margin: 0;
min-height: 100vh;
background-color: green;
}
div {
min-height: 50px;
background-color: pink;
margin-bottom: 50px;
}<div></div>身体用a定义,min-height:100vh我们有一个滚动条,让我们可以看到html.在这里我们有一个保证金塌陷,的边缘div被折叠与机身保证金,从而创造了身体和滚动条后,这个空间.
如果我们参考规范,我们就有这种情况:
当且仅当以下情况时,两个边距相邻:
...
如果父项具有"自动"计算高度,则最后一个流入子项的下边距和其父项的下边距
这div是最后一个流入元素,body并且高度自动,因为我们只指定了最小高度.
现在让我们添加更多可能受此边际影响的元素,并保持边距折叠规则.唯一的方法是添加浮动元素以保持我们div始终是最后一个in-flow元素.
这是新代码:
html {
background: red;
}
body {
margin: 0;
min-height: 100vh;
background-color: green;
}
div {
min-height: 50px;
background-color: pink;
margin-bottom: 50px;
}
.l { …推荐指数
解决办法
查看次数