Html div之间的空格
我知道有很多关于div差距的问题,但我似乎找不到任何适合我的解决方案。我的网页当前看起来像这样: 图像横幅和文本之间存在明显的间隙。我想缩短它,使它看起来更像这样: 我很确定这是我的一个div的CSS的一个问题,但我不确定是什么。以下是检查员的样子,如果有帮助的话: 我曾尝试在bootstrap.min.css中创建一个新类,它对col-lg-12 div和row div都没有顶部填充,但这并没有改变任何事情。我真的不知道接下来该怎么办 这是我的代码()。(我只复制/粘贴了相关部分,因为整个代码很长。如果有任何代码错误或混淆,我深表歉意!)Html div之间的空格,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我知道有很多关于div差距的问题,但我似乎找不到任何适合我的解决方案。我的网页当前看起来像这样: 图像横幅和文本之间存在明显的间隙。我想缩短它,使它看起来更像这样: 我很确定这是我的一个div的CSS的一个问题,但我不确定是什么。以下是检查员的样子,如果有帮助的话: 我曾尝试在bootstrap.min.css中创建一个新类,它对col-lg-12 div和row div都没有顶部填充,但这并没有改变任何事情。我真的不知道接下来该怎么办 这是我的代码()。(我只复制/粘贴了相关部分,因为整
我想答案很简单,但很准确
背景尺寸:100%80%.intro header homepage
中的code>导致了它,因为它只是使背景变小(高度),但这并不意味着div大小会改变。在上的填充。intro message
将文本向下推。有几种方法可以解决这个问题,但最简单的方法是给文本(p.homepage
)一个大约为10%
的负页边距顶部
,以抵消填充。唯一会改变的是文本的位置
body,
html{
宽度:100%;
身高:100%;
}
身体,
h1,
h2,
h3,
h4,
h5,
h6{
字体系列:“Lato”,“Helvetica Neue”,Helvetica,Arial,无衬线;
字号:700;
}
.p-网页{
填充:0px 0px 30px 0px;
字体大小:正常;
字号:18px;
利润率最高:-10%;
}
.导航条粘性顶部{
/*添加导航栏*/
背景色:#0D1721;
边框颜色:#0D1721;
页边距底部:0;
}
托普纳夫先生{
字体大小:14px;
}
.铅{
字号:18px;
字体大小:400;
}
.intro页眉主页{
文本对齐:居中;
颜色:#F8;
背景:url(http://imgur.com/20qY3EH.jpg)不重复;
背景大小:100%80%;
}
.介绍信息{
垫面:20%;
垫底:20%;
}
.介绍信息>h1{
保证金:0;
文本阴影:2px2p3pRGBA(0,0,0,0.6);
字号:5em;
}
-
-
-
网站主页
Lorem ipsum Door sit amet,一位杰出的职业发展者,在劳动和就业领域的临时雇员。但是,在最低限度上,我们需要一个实验室来进行日常工作。酒后驾车
这是一种不受欢迎的行为,它是一种不受欢迎的行为。除偶尔因疏忽而死亡外,不得因疏忽而导致动物死亡
另一种解决方法是更改为背景大小:在.intro header主页上覆盖,然后减少intro message上的填充底部
然后,您可能需要在.p-homepage
的顶部添加一些填充
请参见下面的示例:
body,
html{
宽度:100%;
身高:100%;
}
身体,
h1,
h2,
h3,
h4,
h5,
h6{
字体系列:“Lato”,“Helvetica Neue”,Helvetica,Arial,无衬线;
字号:700;
}
.p-网页{
填充:20px 0px 30px 0px;
字体大小:正常;
字号:18px;
}
.导航条粘性顶部{
/*添加导航栏*/
背景色:#0D1721;
边框颜色:#0D1721;
页边距底部:0;
}
托普纳夫先生{
字体大小:14px;
}
.铅{
字号:18px;
字体大小:400;
}
.intro页眉主页{
文本对齐:居中;
颜色:#F8;
背景:url(http://imgur.com/20qY3EH.jpg)不重复;
背景尺寸:封面;
}
.介绍信息{
垫面:20%;
垫底:8%;
}
.介绍信息>h1{
保证金:0;
文本阴影:2px2p3pRGBA(0,0,0,0.6);
字号:5em;
}
-
-
-
网站主页
Lorem ipsum Door sit amet,一位杰出的职业发展者,在劳动和就业领域的临时雇员。但是,在最低限度上,我们需要一个实验室来进行日常工作。酒后驾车
这是一种不受欢迎的行为,它是一种不受欢迎的行为。除偶尔因疏忽而死亡外,不得因疏忽而导致动物死亡
似乎与您的背景大小有关:100%80%在.intro header主页的规则中,code>是-它是背景大小。更改为background size:cover
div.intro-message
具有填充顶部:20%
和填充底部:20%代码>谢谢。有没有一种方法可以做到这一点,同时保持背景的高度与使用背景大小的结果相同:100%80%代码>?我不希望图像占据页面的一半。我尝试将行div更改为
,但没有任何改变。@JamesDouglas我想保留它,因为我想保留“网站主页”文本和图像横幅顶部/底部之间的填充。谢谢!有没有一种方法可以做到这一点,同时保持背景的高度与使用背景大小的结果相同:100%80%代码>?我不要图像
<div class="intro-header-homepage">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="intro-message">
<h1>Website Homepage</h1>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class = "col-lg-6 col-lg-offset-3" text-align="center">
<p class="p-homepage">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</body>
.p-homepage {
padding: 0px 0px 30px 0px;
font-weight: normal;
font-size: 18px;
}
.intro-header-homepage {
text-align: center;
color: #f8f8f8;
background: url(http://imgur.com/20qY3EH.jpg) no-repeat;
background-size: 100% 80%;
}
.intro-message {
padding-top: 20%;
padding-bottom: 20%;
}