相关疑难解决方法(0)
子元素上的边距移动父元素
我有div(父)包含另一个div(孩子).Parent是body没有特定CSS样式的第一个元素.当我设置
.child
{
margin-top: 10px;
}
最终的结果是我的孩子的顶部仍然与父母对齐.我的父母向下移动10px,而不是让孩子向下移动10px.
我的目标DOCTYPE是XHTML Transitional.
我在这里错过了什么？
编辑1
我的父母需要有严格定义的尺寸,因为它的背景必须从上到下显示在它下面(像素完美).因此,设置垂直边距是不行的.
编辑2
此行为在FF,IE和CR上是相同的.
推荐指数
解决办法
查看次数
为什么这种CSS margin-top风格不起作用？
我尝试在另一个div内的div上添加边距值.一切正常,除了最高值,它似乎被忽略了.但为什么？
我的期望:
我得到了什么:
码:
#outer {
width: 500px;
height: 200px;
background: #FFCCCC;
margin: 50px auto 0 auto;
display: block;
}
#inner {
background: #FFCC33;
margin: 50px 50px 50px 50px;
padding: 10px;
display: block;
}<div id="outer">
<div id="inner">
Hello world!
</div>
</div>W3Schools没有解释为什么保证金的行为方式.
推荐指数
解决办法
查看次数
为什么scale CSS 变换函数不影响margin？
我有一个包含其他几个 div 和元素的 div。
现在我想用 transform: scale(n)
但是当我使用它时，一切看起来都很好，除了内部div的边距保持相同的大小但是内部元素的宽度发生了变化
正如您所看到的，div 的大小减少了一半......但边距是相同的：/
例如代码，您在父级中有一个 div。这个子 div 的边距为 100px
如果我更改父级的比例，子级的边距保持不变，但大小不变。您可以看到孩子在改变比例时没有移动。
.holder {
background: pink;
transform: scale(0.5);
}
#son {
margin-top: 100px;
padding: 20px;
background: green;
}<div class="holder">
<div id="son">
dontcare
</div>
</div>推荐指数
解决办法
查看次数
CSS边距推动body元素
我为div元素设置了边距，但是body元素也获得了该边距。
考虑以下代码：
<!-- HTML -->
<body>
<div>
</div>
</body>
<!-- CSS -->
<style>
html,body {
height:100%;
margin:0;
padding:0;
outline:1px solid blue;
}
div {
margin:20px;
outline:1px solid red;
}
</style>
这是结果和问题：
到目前为止，我已经通过向border:1px solid transparent;body元素添加属性解决了该问题。因为滚动条由于1px边框而出现，所以这破坏了100％的高度。为什么会这样？
可能的解决方案（感谢您的帮助）：添加a padding-top:1px和a margin-top:-1px，这样滚动条不会破坏100％的高度，并且可以避免边距塌陷。
推荐指数
解决办法
查看次数
<html>,<body>,padding,margin,100vh和calc()
请考虑以下代码段:
html {
margin: 0;
padding: 0;
background-color: blue;
}
body {
margin: 0;
padding: 0;
background-color: green;
min-height: 100vh;
}<section style="min-height: 50px; background-color: pink;"></section>正如所料,body元素以绿色填充整个视口,顶部有一个粉红色的section元素.
现在,假设你想做一些非常简单的事情,比如在section元素中设置一个边距:style="min-height: 50px; background-color: pink; margin-bottom: 10px;".出乎意料的是,html元素中的蓝色条带出现在视口的底部.
html {
margin: 0;
padding: 0;
background-color: blue;
}
body {
margin: 0;
padding: 0;
background-color: green;
min-height: 100vh;
}<section style="min-height: 50px; background-color: pink; margin-bottom: 10px;"></section>问题1)为什么会这样？这对我来说没有意义.
纠正此行为的一种方法是min-height在body元素中包含padding和calc()调整:
html {
margin: 0;
padding: 0;
background-color: blue;
}
body {
margin: 0; …推荐指数
解决办法
查看次数
网站顶部的空白
我的网站顶部有一个空格，我想删除但不知道如何删除：
body {
border: 0;
padding: 0;
margin: 0;
}
.header {
width: 900px;
height: 100px;
background-color: #5132FF;
text-align: center;
margin-left: auto;
margin-right: auto;
margin-top: 0;
border: 0;
top: 0;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>DevDoWeb.com</title>
<meta charset="UTF-8">
<meta name="viewport" content="=width=1920, initial-scale=1.0, user-scalable=yes">
<link rel="stylesheet" type="text/css" href="styleSheet.css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
</head>
<body>
<div class="header">
<h3 class="headerText">Test</h3>
</div>
</body>
</html>开发工具告诉我它不能是maring、padding或border....我真的不知道在这里做什么，任何帮助表示赞赏。
推荐指数
解决办法
查看次数
Flexbox 最后一个子边距在 Firefox 中折叠
我有一个 flexbox 容器，高度固定，溢出-y 设置为滚动。在容器内，我有一个值为 margin-bottom: 2rem 的孩子。
在 Firefox 中，最后一个孩子的边距底部被忽略，我不知道为什么？它似乎与溢出有关。Chrome 和 Safari 按预期工作。
JSFIDDLE：https ://jsfiddle.net/y7sn0rgb/1/
CSS
.container {
display: flex;
flex-direction: column;
width: 400px;
height: 600px;
background: grey;
overflow-y: scroll;
}
.comment {
margin-bottom: 2rem;
}
HTML
<div class="container">
<div class="comment">
The problem with Potential Problem #1 is that it appears to fall apart outside of a flex or grid formatting context. For example, in a standard block layout, the last margin doesn't appear to collapse. So maybe overflow …推荐指数
解决办法
查看次数
为什么我的 HTML/CSS 网站顶部有空白？
我的 HTML/CSS 项目顶部有这个奇怪的空白，我无法摆脱。我如何摆脱空白？它甚至可以在不使用normalize.css文件的情况下看到，尽管我已经将边距和填充设置为 0，normalize.css所以这不是问题。我在这里做了一个 JSsnippet可能更容易理解。
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
box-sizing: border-box;
}
这是我项目的 HTML/CSS 代码：
HTML：
<!DOCTYPE html>
<html>
<head>
<title>SuperMegaAwesome Landing Page | Matt Bell</title>
<link rel="stylesheet" type="text/css" href="./Stylesheets/CSS/main.css">
<link rel="stylesheet" type="text/css" href="./Stylesheets/CSS/normalize.css">
</head>
<body>
<header>
<p id="logo">Super<span>Mega</span>Awesome</p>
<nav>
<a href="#">Home</a>
<a href="#">Portfolio</a>
<a href="#">Services</a>
<a href="#">Get in touch</a>
</nav>
</header>
<section id="hero">
<div id="hero_overlay">
<div class="wrapper">
<div id="content">
<h1 class="title">We …推荐指数
解决办法
查看次数
添加padding-top使单独的元素粘在一起
header {
background-color: grey;
height: 118px;
text-align: center;
}
nav {
background-color: red;
height: 40px;
}
main {
background-color: blueviolet;
height: 400px;
text-align: center;
/*Why adding padding-top makes the white space disappear?*/
/*padding-top: 1px; */
}
footer {
background-color: green;
height: 100px;
}
.container {
width: 1024px;
margin: 0 auto;
}
h1 {
font-size: 84px;
color: white;
}
p {
font-size: 16px;
color: white;
}
/* * {
margin-block-start: 0;
margin-block-end: 0;
margin-inline-start: 0;
margin-inline-end: 0;
} */<!DOCTYPE html> …推荐指数
解决办法
查看次数