gpt4 book ai didi

html - 标题和正文之间的不明空间

转载 作者:太空宇宙 更新时间:2023-11-04 08:10:46 24 4
gpt4 key购买 nike

我一直在浏览它,但我找不到任何答案,基本上在 Header 和 Body 之间有一个白色的间隙,见下图:

enter image description here

我在某处读到有些元素有默认边距或填充,例如 <ul>但我不能真正确定,因为我刚刚进入网络。

这是我的元素的定位方式:

header{
background-color: white;
position:relative;
}

p.secondaryText {
color: darkgray;
}

.menu{
background-color: dodgerblue;
}

.logo{
position: relative;
width: 100%;
}

.logo-img{
position: relative;
margin: 10px 15px 15px 100px;
width: 120px;
height: 100px;
}

.social{
width: 100%;
height: 50px;
padding-left: 100px;
padding-right: 50px;
padding-bottom: 10px;
padding-top: 10px;
}

.division{
height: 2px;
width: 100%;
background-color: lightgray;
}

.img-container{
position: absolute;
opacity: 0.75;
filter: alpha(opacity=20);
width: 100%; /* or any custom size */
height: 100%;
}

.body-container {
height: 600px;
width: 100%;
clear: both;
position: relative;
}

body{
margin: 0;
}


#frontText {
position: absolute;
bottom: 0;
right: 0;
margin-bottom: 30px;
color: white;
font-size: 50px;
text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
background-color: transparent;
}

.main-body{
position: relative;
text-align: center;
}

.options-section{
text-align: center;
}

.services-box, .company-box, .contact-box{
position: relative;
width: 250px;
height: 200px;
margin-right: 60px;
background-color: dodgerblue;
display: inline-block;
}

footer{
background-color: black;
height: 200px;
}

和菜单:

ul {
padding: 0;
margin-left: 80px;
}


li {
display: inline;
}

li a{
font-weight: bold;
color: white;
font-size: 15px;
display: inline-block;
padding: 10px 15px;
}

li a:hover{
text-decoration: none;
}

我已经尝试了边距但没有任何影响。

编辑:

您可以下载 project如果你愿意,可以在 github 上运行在节点 js 上,只需节点服务器并在端口 9000 上监听

http://localhost:9000/index.html

.

最佳答案

如您所说,许多元素都有默认样式,UL 就是其中之一。

您需要做的就是用 margin: 0 覆盖它。

header {
background-color: white;
position: relative;
}

p.secondaryText {
color: darkgray;
}

.menu {
background-color: dodgerblue;
}

.menu ul {
margin: 0;
}

.logo {
position: relative;
width: 100%;
}

.logo-img {
position: relative;
margin: 10px 15px 15px 100px;
width: 120px;
height: 100px;
}

.social {
width: 100%;
height: 50px;
padding-left: 100px;
padding-right: 50px;
padding-bottom: 10px;
padding-top: 10px;
}

.division {
height: 2px;
width: 100%;
background-color: lightgray;
}

.img-container {
position: absolute;
opacity: 0.75;
filter: alpha(opacity=20);
width: 100%;
/* or any custom size */
height: 100%;
}

.body-container {
height: 600px;
width: 100%;
clear: both;
position: relative;
}

body {
margin: 0;
}

#frontText {
position: absolute;
bottom: 0;
right: 0;
margin-bottom: 30px;
color: white;
font-size: 50px;
text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
background-color: transparent;
}

.main-body {
position: relative;
text-align: center;
}

.options-section {
text-align: center;
}

.services-box,
.company-box,
.contact-box {
position: relative;
width: 250px;
height: 200px;
margin-right: 60px;
background-color: dodgerblue;
display: inline-block;
}

footer {
background-color: black;
height: 200px;
}

and the menu: ul {
padding: 0;
margin-left: 80px;
}

li {
display: inline;
}

li a {
font-weight: bold;
color: white;
font-size: 15px;
display: inline-block;
padding: 10px 15px;
}

li a:hover {
text-decoration: none;
}
<header>

<div class="social">

<p class="secondaryText">It is a long established fact that</p>

</div>

<div class="division"></div>

<div class="logo">
<img class="logo-img" src="R/Metalplatelogo.jpg">

</div>

<div class="menu" id="myMenu">
<nav>

<ul>

<li><a href="index.html">トップページ</a></li>
<li><a href="business.html">事業内容</a></li>
<li><a href="company.html">会社概要</a></li>
<li><a href="contact.html">お問い合わせ</a></li>
<li><a href="">NEWS</a></li>

</ul>

</nav>

</div>

</header>



<div class="body-container">
<img class="img-container" src="http://via.placeholder.com/2000x2000">
<div id="frontText">確かな技術と最新鋭の設備。<br> 半世紀に渡る信頼に支えられて<br> 私たちは、あらゆるニーズに取り組み続けています。</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular-route.js"></script>
<script src="controllersJS/controllerEvent.js"></script>

<div class="main-body">
<p>有限会社谷口板金工業所は、屋根・外壁工事を専門とする会社です。</p>
<h2>屋根・外壁のことならおまかせください。</h2><br>
<p>住宅から工場やビル・神社仏閣などの大規模施設まで、あらゆる建築物に対応し工事いたします。<br>長年の実績と豊富な経験で培った技術、そして最新鋭の設備でお客様のあらゆるニーズにお応えします。</p>


</div>

<div class="options-section">

<div class="services-box">

</div>

<div class="company-box">

</div>

<div class="contact-box">

</div>


</div>

<div class="about-section">

</div>

<div class="news-section">

</div>

<div class="map">
<iframe width="400" height="250" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?key=AIzaSyB3Dg5WXMBa21xvPSgdEzx-Q9aX42xgwt4&#10; &amp;q=Space+Needle,Seattle+WA" allowfullscreen="">
</iframe>

</div>


<footer>
This is the footer


</footer>

关于html - 标题和正文之间的不明空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46313075/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com