相关疑难解决方法(0)
<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; …推荐指数
解决办法
查看次数
当我尝试使用负边距向上移动图像时,整个容器向上移动
那么,这是html代码:
<div class="bottom_block">
<a class="logo" href="#">
<img src="img/logo_uniqa.jpg" height="90px" width="100px" alt="logo">
</a>
</div>
这是css:
.bottom_block {
background-color: blue;
height: 50px;
width: 100%;
}
.logo {
display:block;
padding-bottom: 10px;
}
.logo img {
display: block;
margin:0 auto;
}
所以,我使用margin-top:-10px,但它移动整个容器,而不仅仅是图像.
推荐指数
解决办法
查看次数
意外的<body>身体行为,因为它被孩子的边缘顶部推下
HTML问题看起来总是那么简单,我几乎感到尴尬地问他们.但是,就是这样,我不知道为什么会这样.
在这个小提琴http://jsfiddle.net/o5ee1oag/2/正在被标题的边距(50px)推下来:
<body>
<div id="background"></div>
<header>
<ul>
<li>Button 1</li>
<li>Button 2</li>
</ul>
</header>
</body>
因此div#background {position:absolute; 被推倒了.然后我去Firebug,应用背景:红色; 身体和整个区域变红,包括边缘.
1)为什么会发生这种情况,身体距离顶部是50px？
2)如何防止身体被压下？
谢谢 :).
推荐指数
解决办法
查看次数
为什么具有上边距的子元素不会拉伸父容器
给定一个具有上边距的子元素的div,为什么边距不在父div内但在外面？
HTML
<div><h1>Titre<h1></div>
CSS
h1 { margin: 20px; }
div { background-color: #DDD; }
推荐指数
解决办法
查看次数
内部 div 使用边距调整外部 div 的大小
我有一个高度由封装的 div 决定的 div。问题是，当我在顶部添加一些额外的边距时，encolsing div 会正确调整大小。当我在底部添加边距时，似乎只有封闭的 div 框模型受到影响，而封闭的 div 则不受影响。
HTML
<div style="height:100px;background-color:#adadbb">
IRRELEVANT THINGS HERE
</div>
<div class="dynamicDiv">
<span> title</span>
<div class="card">
Content here
</div>
</div>
<div style="height:100px;background-color:#adadbb">
IRRELEVANT THINGS HERE VOL 2
</div>
CSS
.dynamicDiv{
background-color:yellow;
}
.card{
height:15vh; //an example of the height for this card. could be anything.
margin-top:10px;
margin-bottom:10px;
}
看起来这与<span> title</span>元素有关，好像我在底部添加一个元素，就像我期望的那样工作（除非跨度为空，在这种情况下，事情呈现为好像跨度不存在一样）。
我不太明白为什么会发生这种情况，所以如果它与盒子模型有明显的关系，请告诉我。非常感谢。
在这里小提琴：
https://jsfiddle.net/d88yr4yw/
PS：我试图实现的是有一个始终与封闭的 div 高度一样高的 div + 顶部和底部边距 + 那里可能存在的任何其他元素。如果不是不可能解决这个问题，我宁愿我不必硬编码任何高度。
推荐指数
解决办法
查看次数
为什么子div的边距会影响父div的边距？
请参考http://jsfiddle.net/NobleWolf/X6qVv/。
我有三个由 jquery 设置为窗口高度的 div，它们有一个底部边距，它们被称为“.pannel”。在每个“.pannel”中都有一个名为“.pContent”的子元素，它有一个顶部填充。
我的问题是为什么“.pContent”在“padding-top: 3%;”时会改变父级的上边距。更改为“保证金最高：3%；”
谢谢！
推荐指数
解决办法
查看次数
删除CSS引起的随机空格
我正在为Tumblr创建一个主题,本地一切正常.然而,当我将代码粘贴到Tumblr编辑器并在网站上预览时,页面顶部会出现一个空白区域.我已经浏览了CSS并且无法弄清楚它为什么会出现.任何想法我都尝试了一切.
Tumblr地址是http://storyline-expose.tumblr.com密码,它是WIP
问题的屏幕截图:
推荐指数
解决办法
查看次数
如何摆脱div之间的空间
我的网页上有两条div之间有一条粗白线,每当我<ul>在第二个div中删除我的白线就会消失.如何删除白线并保留我的<ul>？我试过删除所有的CSS元素,但没有成功.即使空<ul>的空间也在那里......
.header {
width: 100%;
height: 410px;
background-color: #040104;
text-align: center;
}
.nav {
width: 100%;
height: 50px;
background-color: #040104;
font-family: sans-serif;
text-align: center;
}
.nav li {
display: inline;
color: #ce5e27;
font-size: xx-large;
}
.nav ul li a {
padding: 1em;
color: #ce5e27;
text-decoration: none;
}
.contentContainer {
height: 600px;
background-color: #040104;
}
.content {
width: 60%;
height: 200%;
float: left;
background-color: #040104;
text-align: center;
}
.content h1 {
font-family: sans-serif;
font-size: x-large; …推荐指数
解决办法
查看次数