CODEWITHSUNDEEP
htmlcss
demboz11
demboz11

Reputation: 937

How to make space between menu items in CSS/HTML

Problem: Can't make space (at least 1cm) between menu items.

I'm a beginner, just learning. I know that this question sounds dumb to experienced users.

Here is the code:

body {
  height: auto;
  width: auto;
  background-image: url("img/top.png");
}

.header {
  margin: 0px auto;
  max-width: 960px;
}

#header {
  height: 300px;
  width: 960px;
  background-image: url("img/top.png")
}

#menu ul {
  margin: 0px auto;
  margin-left: -20px;
  /*pull towards left*/
  margin-right: 20px;
  /*push towards right*/
  list-style: none;
  background: #3d3d5c;
}

#menu li {
  display: inline-block;
}

#menu li a {
  margin-left: -40px;
  color: #fff;
  text-decoration: none;
  display: block;
  background: red;
  padding: 0 10px 0 10px;
  height: 54px;
  width: 130px;
  line-height: 54px;
}

#menu li a:hover {
  color: #fff;
  text-decoration: none;
  background: url(img/manu1.png);
  height: 54px;
  width: 130px;
  line-height: 54px;
}

.box {
  margin: 0px auto;
  width: 960px;
  background-color: ghostwhite;
  height: 700px;
  max-height: 2200px;
}

.news {
  margin: 0px auto;
  margin-left: 20px;
  margin-top: 20px;
  display: inline-block;
  background-image: url('img/bgr.png');
  background-size: 960px, 500px;
  width: 670px;
  height: 500px;
  max-height: 2000px;
}

.news h1 {
  background-image: url('img/news.png');
  font-style: normal;
  font-size: 30px;
  color: white;
  width: 670px;
  height: 38px;
}

.part {
  margin: 0px auto;
  margin-left: 700px;
  margin-top: -95px;
  background-image: url('img/bgr.png');
  background-size: cover;
  width: 240px;
  height: 300px;
  max-height: 2000px;
}

.part h1 {
  background-image: url('img/side.png');
  font-style: normal;
  font-size: 30px;
  color: white;
  width: 240px;
  height: 38px;
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <title>Pagrindinis Puslapis</title>
</head>

<body>
  <header class="header" id="header">
  </header>
  <menu class="header" id="menu">
    <ul>
      <li><a href='#'>Pagrindinis</a></li>
      <li><a href='#'>Kontaktai</a></li>
      <li><a href='#'>Paslaugos</a></li>
    </ul>
  </menu>
  <div class="box">
    <div class="news">
      <h1>Labas rytas</h1>
      Štai tokios naujienos
      <div class="part">
        <h1>RĖMĖJAI</h1>
        <img src="rem.png" height="100" width="100" </img>
        <h1>labas</h1>
        Čia naujienų nėra

      </div>
    </div>
  </div>


</body>

</html>

Adding some extra characters to the body of this post to bypass validation... Adding some extra characters to the body of this post to bypass validation...

Upvotes: 1

Views: 14612

Answers (2)

milo
milo

Reputation: 3

Hej, you could use "gap" property.Add gap to your #menu or .menu. It is actually a gap between li items.

.menu ul {
    gap: 16px;
}

Upvotes: 0

Mi-Creativity
Mi-Creativity

Reputation: 9654

you can add margin-right value to the #menu li or #menu li a JS Fiddle

#menu li {
    display: inline-block;
    margin-right:50px;
}

Upvotes: 6

Related Questions