Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/82.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Html div之间的空格_Html_Css_Twitter Bootstrap - Fatal编程技术网

Html div之间的空格

Html div之间的空格,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我知道有很多关于div差距的问题,但我似乎找不到任何适合我的解决方案。我的网页当前看起来像这样: 图像横幅和文本之间存在明显的间隙。我想缩短它,使它看起来更像这样: 我很确定这是我的一个div的CSS的一个问题,但我不确定是什么。以下是检查员的样子,如果有帮助的话: 我曾尝试在bootstrap.min.css中创建一个新类,它对col-lg-12 div和row div都没有顶部填充,但这并没有改变任何事情。我真的不知道接下来该怎么办 这是我的代码()。(我只复制/粘贴了相关部分,因为整

我知道有很多关于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%;
}