相关疑难解决方法(0)
在浮动的div css下的margin-top
我在浮动下有一个div:右边div.由于某种原因,上边距不能应用于第一个div.这是css
#over{
width:80%;
float:right;
color:#e68200;
}
#under{
clear:both;
background:url(../images/anazitisi.png) no-repeat;
margin:10px auto; /*does not work!!!*/
width:95px;
height:20px;
}
有谁知道发生了什么？
推荐指数
解决办法
查看次数
CSS中的保证金是多少？
我假设margin是很久以前父元素和它自身之间的空间.但我认为这不是真的.请使用CSS查看下面的简短HTML.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Box Model</title>
<style type="text/css">
body {
background-color: #ccc;
}
header {
text-align: center;
text-decoration: underline;
font-weight: bold;
}
#container {
background-color: grey;
width : 400px;
height : 400px;
}
#container .box {
background-color: slategrey;
width : 200px;
height : 200px;
color : #fff;
border: 5px solid navy;
margin-top: 50px;
margin-left:50px;
padding-top:20px;
padding-left:20px;
}
</style>
</head>
<body>
<header>Box Model Example</header>
<section>
<div id="container">
<div class="box">Content</div>
</div>
</section>
</body>
</html>
您将在下面的屏幕截图中看到输出.
我margin-top:50px; …
推荐指数
解决办法
查看次数
为什么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>推荐指数
解决办法
查看次数
如果声明了border,css margin-top属性才有效
好,
这已经有一段时间了,因为这种情况一直持续下去,我从来没有时间问过为什么:
所以这是我非常简单的HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Page Title</title>
<style>
div{
width: 200px;
background: green;
}
p{
background: yellow;
margin: 40px;
}
</style>
</head>
<body>
<div>
<p>Testing</p>
</div>
</body>
</html>
没什么特别的,只有一个带div的简单页面和div里面的一个段落.
但是你可以注意到在css上我声明段落与divs界限相差40px ......这就发生了
那是对的......顶部和底部边距被忽略了......
但是如果我添加一个1px的红色边框div:
div{
width: 200px;
background: green;
border: 1px solid red;
}
这是我得到的:
所以,是的,这对我来说真的听起来很奇怪...这是在safari中发生的,但我相信它会在其他浏览器上发生同样的事情......我的问题是......为什么会发生这种情况？
有没有办法解决它？
提前致谢
推荐指数
解决办法
查看次数
填充与边缘的孩子
让我们开始说我理解盒子模型.在我作为开发人员的短暂时间里,我试图非常贴近语义html并使用响应式设计实践.我最近在Jr. Developer的新公司找到了一份工作,而我的老兄则虔诚地反对填充.就像他不想在任何情况下都使用它一样.他希望我在所有东西上使用设置高度和宽度,如果我需要模拟填充,我必须使用边距添加子div.例如:
<div class="caption" style="padding: 5px;">
Caption
</div>
需要成为
<div class="caption">
<div class="captionContainer" style="margin:5px;">
Caption
</div>
</div>
我试图弄清楚为什么会这样,以及我怎么可能解释为什么我认为这很糟糕,但它不起作用.这对我来说似乎是错的.他说这是因为填充拉伸了一个元素的宽度,我用盒子大小来响应:border-box.
我必须按照他的说法去做,但有时我们谈论它,他似乎有点接受我的建议,但我不认为我说的是正确的事情.它真的更好吗？如果不是,为什么？
这个问题可能因为讨论而被关闭 - 但是这让我发疯,我不知道还有什么地方可以转.
提前致谢!
推荐指数
解决办法
查看次数
给子div相对于父div的边距
这是我的html：
<div class='parentDiv'>
<div class='childDiv'></div>
</div>
这是我的CSS：
.parentDiv {
margin-top: 200px;
width: 700px;
height: 800px;
background-color: red;
}
.childDiv {
background-color: green;
width: 50px;
height: 50px;
margin-top: 22px;
}
小提琴：http：//jsfiddle.net/1whywvpa/
childDiv为何无法获得22px的页边空白？如果像素大于已经提供给parentDiv的200像素，则它只会获得页边空白。有什么办法可以使childDiv相对于parentDiv获得22px的父级div，而无需进行某种类型的“给父div一个1px的填充”黑客？
推荐指数
解决办法
查看次数
为什么有些html和body属性会出现这种行为？
我想了解一些事情.
第一个问题:
为什么有一个margin-top上body？
html {
height: 100%;
background-color: red;
}
body {
height: 100%;
margin: 0;
background-color: yellow;
}<h1>Hello Plunker!</h1>如果我在Chrome中查看开发工具检查器,它会向我显示h1上边距位于上边距之外body(图片显示h1突出显示):
第二个问题:
在下一个例子中,为什么黄色被绘制在body？之外？
我希望只在body元素中看到黄色,因为我设置了overflow属性:
body {
height: 100px;
background-color: yellow;
margin: 0;
overflow: hidden;
}第三个问题
如果我background-color在html元素上添加一个,它可以工作,黄色只填充body元素,为什么？
html {
background-color: red;
}
body {
height: 100px;
background-color: yellow;
margin: 0;
overflow: hidden;
}推荐指数
解决办法
查看次数
网站顶部的空白
我的网站顶部有一个空格，我想删除但不知道如何删除：
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....我真的不知道在这里做什么，任何帮助表示赞赏。
推荐指数
解决办法
查看次数
在CSS中,元素的"边距"对其父级的"高度"没有影响？
以下是片段(JSFiddle上的演示)
#inner {
background-color: yellow;
margin-left: 50px;
margin-bottom: 50px;
}
#outer {
background-color: red;
}<div id="outer">
<div id="inner">
test
</div>
</div>从演示中可以看出,#inner元素有一个margin-bottom.
我预计高度#outer将足够大,以包括#inner边距的轮廓.并且输出将在黄色条下方有一个红色条.
然而,我发现#outer虽然我添加了规则margin-bottom: 50px,但它的高度根本没有改变#inner.
有没有人有这个想法？有没有办法确保父母的内容区域足够大,以保持其子女边际的轮廓？
此外,除了提供黑客解决方案之外,如果答案可以包括一些解释或相关文档/文章的链接,那将是很好的.为什么保证金规则是这样设计的.
谢谢!
推荐指数
解决办法
查看次数
为什么这个div margin-top没有按预期工作？
我使用Firefox 8.0.1
margin-top没有按预期工作,有人可以帮忙吗？谢谢.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>New Border</title>
<style type="text/css">
#page {
width:980px;
margin: 50px auto;
}
#board {
width:600px;
height:400px;
background-color: gray;
}
.cell {
border: 1px solid;
width:50px;
height:20px;
margin: 30px 5px;
}
</style>
</head>
<body>
<div id="page">
<div id="board">
<div class="cell">
</div>
</div>
</div>
</body>
</html>
所以,margin-top在celldiv中没有按预期工作.
我认为应该将div margin-left放在celldiv之下board,但事实并非如此.
这是截图:
推荐指数
解决办法
查看次数