My line buttos have white spaces

Question

I made a website with HTML/CSS and I was working with my page navigator when I saw that there was a white space between my background and border of two words. A, d I don't now how to remove that white space here is a picture

enter image description here

The link buttonsar left above is there someone that now how to remove that?

My code.

<html>
<head>
<style>
#h1index {color : black;  text-align: center; background: linear-gradient(to bottom,#F2F2F2,#94A394); border-style: solid; border-radius: 25px; border-color: black;}
body {background-color: #F8F8F8;} <!-- achtergrond kleur -->
#tekstindex {color : black;}
#homelink {background: linear-gradient(to bottom,#F2F2F2,#94A394); border-style: solid;  border-color: black transparent black black;   text-decoration: none; border-radius: 25px 0px 0px 25px;  font-size: 25px; padding-left: 5px;  }
#projectslink {background: linear-gradient(to bottom,#F2F2F2,#94A394); border-style: solid;  border-color: black transparent black transparent;   text-decoration: none;  font-size: 25px; }
</style>
</head>
<body>
<a href="url" id="homelink">home</a> <!-- hompage link --> <a href="url" id="projectslink">projects</a> <!-- link naar projects pagina --><a href="url" id ="gameslink">games</a><!-- linkinaar games pagina -->
<h1 id="h1index"> welcom to the codenoob website </h1> <!-- welcom message -->
<p id="tekstindex">latest news.</p>
</body>
</html>

`` elements are inline elements, so the spaces that you write in code (including line breaks and tabs) will shown in the rendered page. — Marcos Pérez Gude, Jun 06 '16 at 15:56

score 1 · Answer 1 · answered Jun 06 '16 at 15:57

Inline elements are sensitive to white space in your code. Just remove it.

#h1index {
  color: black;
  text-align: center;
  background: linear-gradient(to bottom, #F2F2F2, #94A394);
  border-style: solid;
  border-radius: 25px;
  border-color: black;
}
body {
  background-color: #F8F8F8;
}
<!-- achtergrond kleur --> #tekstindex {
  color: black;
}
#homelink {
  background: linear-gradient(to bottom, #F2F2F2, #94A394);
  border-style: solid;
  border-color: black transparent black black;
  text-decoration: none;
  border-radius: 25px 0px 0px 25px;
  font-size: 25px;
  padding-left: 5px;
}
#projectslink {
  background: linear-gradient(to bottom, #F2F2F2, #94A394);
  border-style: solid;
  border-color: black transparent black transparent;
  text-decoration: none;
  font-size: 25px;
}

<a href="url" id="homelink">home</a><!-- hompage link --><a href="url" id="projectslink">projects</a> 
<!-- link naar projects pagina --><a href="url" id="gameslink">games</a>
<!-- linkinaar games pagina -->
<h1 id="h1index"> welcom to the codenoob website </h1> 
<!-- welcom message -->
<p id="tekstindex">latest news.</p>

i need to add my css into my html becouse hosting problems. and it dont work inside my html — yente paternotte, Jun 06 '16 at 16:19
The changes don't involve the CSS. Just remove the white space in your HTML code. — j08691, Jun 06 '16 at 16:21
ow k thanks and is ther also a way to remove that triangle things between the two words — yente paternotte, Jun 06 '16 at 16:37

score 0 · Answer 2 · answered Jun 06 '16 at 15:58

0

Obviously, it is due to the space between two words.

You should use <span> to wrap the two words and apply the style on <span>

answered Jun 06 '16 at 15:58

Jimmy Ko

857
1
8
20

Does `` ignores space ? – N Kumar Jun 06 '16 at 16:01
Nope, as @j08691 mentioned. Inline elements always separate by a space. – Jimmy Ko Jun 07 '16 at 09:44

score 0 · Answer 3 · answered Jun 06 '16 at 16:03

0

try floating the buttons to the left. float:left. Also, setting the position to relative might work.

answered Jun 06 '16 at 16:03

RomanK

155
1
2
13

My line buttos have white spaces

3 Answers3