Блог

Главная - Вопросы по программированию - Как удалить пробел между и

Как удалить пробел между и

#html #css

#HTML #css

Вопрос:

Существует большой разрыв между <nav> панелью в верхней части страницы и <header> панелью под ней. Я уже исправлял эту проблему раньше, но не помню, как я это делал.

 <html>
<head>
    <title>Welcome</title>
    <link href="https://fonts.googleapis.com/css?family=Oswald:400,700" rel="stylesheet">
</head>
<body>
    <center>
        <nav>
            <ul>
                <a href="#">About Me</a>
                <a href="#">Store</a>
                <p class="thaf">Thaf</p>
                <a href="#">Contact</a>
                <a href="#">Stuff</a>
            </ul>
        </nav>
        <header>
            <p class="hello">Hello.</p>
        </header>
        <section>
            <p>Quibusdam quid ullamco voluptate. Laboris quem fabulas quibusdam qui in minim 
                ubi quorum. Quo tamen hic velit. A multos aliqua de vidisse, ea esse litteris, 
                in aute hic multos, de magna nisi nulla nescius hic ingeniis quae ut ingeniis 
                firmissimum, se fugiat quibusdam commodo id nostrud a quae excepteur, cupidatat 
                quis nostrud iudicem. Aute nescius incurreret. Qui qui fore magna magna, ab aute 
                aliqua et tempor, se quis senserit eu dolor ne ubi legam senserit.</p>
            <p>Te illum proident. Minim voluptate pariatur, non varias appellat, ubi do quid 
                consequat sed qui expetendis te commodo, nam illum cernantur, cillum proident 
                ubi offendit, veniam mentitum ubi ullamco aut quid ingeniis ubi magna amet. 
                Eiusmod labore et litteris comprehenderit e non aut illum appellat. Id sunt nisi 
                enim senserit e appellat sunt ab eiusmod voluptatibus, a tamen consectetur eu 
                malis despicationes possumus culpa litteris, ut enim sed magna, do aute aliqua 
                varias tempor qui nam sed veniam probant, ex quo exercitation. Fugiat deserunt 
                ea lorem nulla si ubi irure fidelissimae. Mandaremus dolore cillum incurreret 
                esse hic quae ita admodum ne eram a a elit singulis vidisse si anim 
                tractavissent ullamco tamen possumus se in ab legam probant, eu laboris 
                firmissimum, quamquam est deserunt non ex irure aliqua culpa offendit. Ut varias 
                eruditionem et iis fore deserunt coniunctione.</p>
        </section>
    </center>
</body>
</html>
 
 p.thaf {
display: inline;
font-family: 'Oswald', sans-serif;
margin: 50px;
}
nav {
background-color: darkgray;
padding: 5px;
margin: 0px;
overflow: hidden;
}
a {
text-align: center;
cursor: pointer;
outline: none;
color: #000000;
border: none;
text-decoration: none;
color: inherit;
padding: 23;
font-family: sans-serif;
margin: 50;
} 
a:hover {
background-color: #666;
}
p.hello {
text-align: left;
margin-left: 400px;
font-size: 100px;
font-family: 'Oswald', sans-serif;
color: white;
}
body {
margin: 0;
color: white;
background-color: #666;
}
header {
margin: 0;
padding: 0;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-color: green;
height: 500px;
}

Я также создал JSFiddle, если вы хотите: https://jsfiddle.net/jy1boL8k/1 /

Комментарии:

1. просто удалите отступы и поля, которые вы объявили в nav в css

Ответ №1:

Добавить margin: 0; в p.hello — из-за большого размера шрифта этот p тег по умолчанию автоматически имеет большой margin-top , который добавляется к .header элементу. Этот параметр сбрасывает его:

https://jsfiddle.net/ze8pwk1z/

Ответ №2:

 p.hello {
    text-align: left;
    margin-left: 400px;
    font-size: 100px;
    font-family: 'Oswald', sans-serif;
    color: white;
}

Ваш размер шрифта является виновником. Измените его, и пробел изменится соответствующим образом.

Ответ №3:

измените свой p.hello для этого

 p.hello {
text-align: left;
margin:0px;
font-size: 100px;
font-family: 'Oswald', sans-serif;
color: white;
padding-left: 400px;
}
Метки: