Помогите с тегом

Question

я новичок в html/css и поэтому появилась проблема

html {
    font-family: Open Sans, sans-serif;
}
body {
    margin: 0;
    padding: 0;
}

*,
:after,
:before {
    box-sizing: border-box;
}

#global-header {
    border-bottom: 2px solid grey;
}

#navbar {
    margin: 0;
    padding: 0;
    text-align: center;
}

#navbar li { 
    display: inline; 
}

#navbar a {
    color: black;
    text-decoration: none;
    display: inline-block;
    width: 90px; height: 46px;
    border-right: 1px solid grey;
    line-height: 46px;
}

#navbar a:hover {
    background-color: whitesmoke;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name= viewport content= width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=no>
    <link rel="stylesheet" href="static/css/style.css">
    <title>GorkiiOgurec</title>
</head>
<body>
    <div id="header">
        <header id="global-header">
            <ul id="navbar">
                <li><a class="nav__a" href="/news/">News</a></li>
                <li><a class="nav__a" href="/videos/">Videos</a></li>
                <li><a class="nav__a" href="/photos/">Photos</a></li>
                <li><a class="nav__a" href="/posts/">Posts</a></li>
                <li><a class="nav__a" href="/articles/">Articles</a></li>
            </ul>
        </header>
    </div>
</body>
</html>

Между ссылками есть небольшой пробел я не понимаю как его убрать. Спасибо!

Answer 1

html {
  font-family: Open Sans, sans-serif;
}

body {
  margin: 0;
  padding: 0;
}

*,
:after,
:before {
  box-sizing: border-box;
}

#global-header {
  border-bottom: 2px solid grey;
}

#navbar {
  margin: 0;
  padding: 0;
  text-align: center;
  
  
  display: flex;
  justify-content: center;
  
  
}

#navbar li {


  display: inline-flex;
  
  
}

#navbar a {
  color: black;
  text-decoration: none;
  display: inline-block;
  width: 90px;
  height: 46px;
  border-right: 1px solid grey;
  line-height: 46px;
}

#navbar a:hover {
  background-color: whitesmoke;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name=v iewport content=w idth=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=no>
  <link rel="stylesheet" href="static/css/style.css">
  <title>GorkiiOgurec</title>
</head>

<body>
  <div id="header">
    <header id="global-header">
      <ul id="navbar">
        <li><a class="nav__a" href="/news/">News</a></li>
        <li><a class="nav__a" href="/videos/">Videos</a></li>
        <li><a class="nav__a" href="/photos/">Photos</a></li>
        <li><a class="nav__a" href="/posts/">Posts</a></li>
        <li><a class="nav__a" href="/articles/">Articles</a></li>
      </ul>
    </header>
  </div>
</body>

</html>

Answer 2

Пустое поле создаётся браузером, есть несколько способов его убрать.

Писать ссылки в строку:

html {
  font-family: Open Sans, sans-serif;
}

body {
  margin: 0;
  padding: 0;
}

*,
:after,
:before {
  box-sizing: border-box;
}

#global-header {
  border-bottom: 2px solid grey;
}

#navbar {
  margin: 0;
  padding: 0;
  text-align: center;
}

#navbar li {
  display: inline;
}

#navbar a {
  color: black;
  text-decoration: none;
  display: inline-block;
  width: 90px;
  height: 46px;
  border-right: 1px solid grey;
  line-height: 46px;
}

#navbar a:hover {
  background-color: whitesmoke;
}

<header id="global-header">
  <ul id="navbar">
    <li><a class="nav__a" href="/news/">News</a></li><li><a class="nav__a" href="/videos/">Videos</a></li><li><a class="nav__a" href="/photos/">Photos</a></li><li><a class="nav__a" href="/posts/">Posts</a></li><li><a class="nav__a" href="/articles/">Articles</a></li>
  </ul>
</header>

Но это не совсем удобный вариант, по этому лучше перейти к следующему.

Использовать комментарии между элементами:

html {
  font-family: Open Sans, sans-serif;
}

body {
  margin: 0;
  padding: 0;
}

*,
:after,
:before {
  box-sizing: border-box;
}

#global-header {
  border-bottom: 2px solid grey;
}

#navbar {
  margin: 0;
  padding: 0;
  text-align: center;
}

#navbar li {
  display: inline;
}

#navbar a {
  color: black;
  text-decoration: none;
  display: inline-block;
  width: 90px;
  height: 46px;
  border-right: 1px solid grey;
  line-height: 46px;
}

#navbar a:hover {
  background-color: whitesmoke;
}

<header id="global-header">
  <ul id="navbar">
    <li><a class="nav__a" href="/news/">News</a></li><!-- 
    --><li><a class="nav__a" href="/videos/">Videos</a></li><!-- 
    --><li><a class="nav__a" href="/photos/">Photos</a></li><!-- 
    --><li><a class="nav__a" href="/posts/">Posts</a></li><!-- 
    --><li><a class="nav__a" href="/articles/">Articles</a></li>
  </ul>
</header>

Нулевой шрифт родителя:

html {
  font-family: Open Sans, sans-serif;
}

body {
  margin: 0;
  padding: 0;
}

*,
:after,
:before {
  box-sizing: border-box;
}

#global-header {
  border-bottom: 2px solid grey;
}

#navbar {
  margin: 0;
  padding: 0;
  text-align: center;
  font-size: 0;
}

#navbar li {
  display: inline;
  font-size: 14px;
}

#navbar a {
  color: black;
  text-decoration: none;
  display: inline-block;
  width: 90px;
  height: 46px;
  border-right: 1px solid grey;
  line-height: 46px;
}

#navbar a:hover {
  background-color: whitesmoke;
}

<header id="global-header">
  <ul id="navbar">
    <li><a class="nav__a" href="/news/">News</a></li>
    <li><a class="nav__a" href="/videos/">Videos</a></li>
    <li><a class="nav__a" href="/photos/">Photos</a></li>
    <li><a class="nav__a" href="/posts/">Posts</a></li>
    <li><a class="nav__a" href="/articles/">Articles</a></li>
  </ul>
</header>

БЛОГ НА HUSL

Помогите с тегом

Ответы (2 шт):

Писать ссылки в строку:

Использовать комментарии между элементами:

Нулевой шрифт родителя: