Reputation: 90
I have been making a website in CSS and PHP, and the header seems to have a margin of about 2px between each link. I didn't define this margin myself and can't find the cause of the problem anywhere. I can sort of fix the issue by adding a negative margin of 2px but i feel that this doesn't really solve the problem and just masks it.
The links are inline-block's and before they were flush with each other and were inline with the "Leader Board" div i have.
html,
body {
margin: 0;
padding: 0;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
min-height: 100%;
}
h1 {
font-size: 22px;
margin: 0px;
}
h2 {
padding: 5px;
margin: 0px;
}
h3 {
padding: 5px;
margin: 0px;
}
p {
margin: 0px;
padding: 5px;
}
#wrapper {
position: relative;
min-height: 100%;
background-color: #eee;
background-size: cover;
}
#header {
padding: 0px 50px 0px 0px;
margin: 0;
position: fixed;
width: 100%;
height: 90px;
background-color: #ffbb00;
text-align: right;
line-height: 90px;
}
#header h1 {
padding: 0px 0px 0px 5px;
margin: 0;
float: left;
text-align: center;
display: inline-block;
line-height: 90px;
font-size: 80px;
color: #00a1ff;
font-style: italic;
text-transform: uppercase;
}
#header a {
padding: 0px 25px 0px 25px;
margin: 0;
transition: background .5s;
display: inline-block;
box-sizing: border-box;
width: auto;
height: 100%;
text-decoration: none;
text-align: center;
line-height: 90px;
font-size: 25px;
letter-spacing: 4px;
color: #fff;
text-transform: uppercase;
}
#header a#selected {
background: #ff9f00;
cursor: default
}
#header a:hover {
transition: background .5s;
background: #ffaa00
}
#LeaderBoard {
position: fixed;
margin-top: 90px;
right: 0px;
float: right;
width: 492px;
height: 100%;
background-color: #FFEE77;
padding: 0px;
z-index: 9;
}
#LeaderBoardHead {
background-color: #ffb233;
height: 65px;
line-height: 65px;
width: 100%;
margin-top: 0px;
}
#LeaderBoardHead h2 {
font-family: sans-serif;
color: #ffffff;
padding: 0 0 0 0;
font-size: 50;
text-align: center;
}
#welcome {
position: relative;
margin-top: 180px;
margin-right: 45%;
margin-left: 5%;
padding: 0px;
float: right;
width: auto;
height: auto;
background-color: ;
z-index: 1;
}
#welcome h2 {
font-size: 50;
font-family: sans-serif;
font-style: italic;
color: #00a1ff;
}
#welcome h3 {
color: #00a1ff;
font-size: 22;
}
#welcome p {
color: #00a1ff;
font-size: 18;
}
<html>
<head>
<title>Flash Crash</title>
<link rel="shortcut icon" href="../assets/favicon.png">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="../css/stylesheet.css">
<meta name="description" content="Flash Crash" />
<meta name="viewport" content="width=device-width" />
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>Flash Crash</h1>
<a id="selected" href="../index.php" hreflang="en-gb">Home</a> <a href="../login.php" hreflang="en-gb">Login</a> <a href="../feedback.php" hreflang="en-gb">Feedback</a> </div>
<link rel="stylesheet" type="text/css" href="../css/LeaderBoard.css" />
<div id="LeaderBoard">
<div id="LeaderBoardHead">
<h2>Leader Board</h2>
</div>
<div id="LeaderBoardContent">
</div>
</div>
<link rel="stylesheet" type="text/css" href="../css/welcome.css" />
<div id="welcome">
<h2>Welcome to Flash Crash!</h2>
<h3>The Online Flash Card Crash Course for Computer Science</h3>
<p>Flash Crash is a competitive online revision tool for computing students. <br> compete against your class mates by compleeting randomly generated quizzes <br> to earn points and unlock new editing permissions on the site!
</p>
</div>
</div>
</body>
</html>
Here's My website so you can see the problem for yourself:
Any help is much appreciated, thanks!
Upvotes: 2
Views: 738
Reputation: 11
Instead of using margin:0px; in every element, you could use:
*{
margin: 0;
}
* Is used for applying whatever you put there on everything
Upvotes: 0
Reputation:
There are whiteSpace text nodes presented between anchor tags.Inpect the anchor tags you will find small bubble between anchor tags. See this link .you will find answer https://blog.nightly.mozilla.org/2016/10/17/devtools-now-display-white-space-text-nodes-in-the-dom-inspector/
Upvotes: 1
Reputation: 67778
You have spaces between you menu a
tags. If you remove those, it works as expected.
html,
body {
margin: 0;
padding: 0;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
min-height: 100%;
}
h1 {
font-size: 22px;
margin: 0px;
}
h2 {
padding: 5px;
margin: 0px;
}
h3 {
padding: 5px;
margin: 0px;
}
p {
margin: 0px;
padding: 5px;
}
#wrapper {
position: relative;
min-height: 100%;
background-color: #eee;
background-size: cover;
}
#header {
padding: 0px 50px 0px 0px;
margin: 0;
position: fixed;
width: 100%;
height: 90px;
background-color: #ffbb00;
text-align: right;
line-height: 90px;
}
#header h1 {
padding: 0px 0px 0px 5px;
margin: 0;
float: left;
text-align: center;
display: inline-block;
line-height: 90px;
font-size: 80px;
color: #00a1ff;
font-style: italic;
text-transform: uppercase;
}
#header a {
padding: 0px 25px 0px 25px;
margin: 0;
transition: background .5s;
display: inline-block;
box-sizing: border-box;
width: auto;
height: 100%;
text-decoration: none;
text-align: center;
line-height: 90px;
font-size: 25px;
letter-spacing: 4px;
color: #fff;
text-transform: uppercase;
}
#header a#selected {
background: #ff9f00;
cursor: default
}
#header a:hover {
transition: background .5s;
background: #ffaa00
}
#LeaderBoard {
position: fixed;
margin-top: 90px;
right: 0px;
float: right;
width: 492px;
height: 100%;
background-color: #FFEE77;
padding: 0px;
z-index: 9;
}
#LeaderBoardHead {
background-color: #ffb233;
height: 65px;
line-height: 65px;
width: 100%;
margin-top: 0px;
}
#LeaderBoardHead h2 {
font-family: sans-serif;
color: #ffffff;
padding: 0 0 0 0;
font-size: 50;
text-align: center;
}
#welcome {
position: relative;
margin-top: 180px;
margin-right: 45%;
margin-left: 5%;
padding: 0px;
float: right;
width: auto;
height: auto;
background-color: ;
z-index: 1;
}
#welcome h2 {
font-size: 50;
font-family: sans-serif;
font-style: italic;
color: #00a1ff;
}
#welcome h3 {
color: #00a1ff;
font-size: 22;
}
#welcome p {
color: #00a1ff;
font-size: 18;
}
<html>
<head>
<title>Flash Crash</title>
<link rel="shortcut icon" href="../assets/favicon.png">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="../css/stylesheet.css">
<meta name="description" content="Flash Crash" />
<meta name="viewport" content="width=device-width" />
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>Flash Crash</h1>
<a id="selected" href="../index.php" hreflang="en-gb">Home</a><a href="../login.php" hreflang="en-gb">Login</a><a href="../feedback.php" hreflang="en-gb">Feedback</a></div>
<link rel="stylesheet" type="text/css" href="../css/LeaderBoard.css" />
<div id="LeaderBoard">
<div id="LeaderBoardHead">
<h2>Leader Board</h2>
</div>
<div id="LeaderBoardContent">
</div>
</div>
<link rel="stylesheet" type="text/css" href="../css/welcome.css" />
<div id="welcome">
<h2>Welcome to Flash Crash!</h2>
<h3>The Online Flash Card Crash Course for Computer Science</h3>
<p>Flash Crash is a competitive online revision tool for computing students. <br> compete against your class mates by compleeting randomly generated quizzes <br> to earn points and unlock new editing permissions on the site!
</p>
</div>
</div>
</body>
</html>
Upvotes: 1
Reputation: 518
It's a known problem with white-space.
You can remove the spaces between your links or float them next to eachother to fix this.
Upvotes: 0