2
Ich habe eine Website in CSS und PHP gemacht, und die Überschrift scheint einen Abstand von etwa 2px zwischen jedem Link zu haben. Ich habe diesen Rand nicht selbst definiert und kann die Ursache des Problems nirgendwo finden. Ich kann das Problem beheben, indem ich einen negativen Rand von 2px hinzufüge, aber ich fühle, dass dies das Problem nicht wirklich löst und es nur maskiert.Mysteriöse Marge?
Die Links sind Inline-Blöcke und bevor sie miteinander fluchten und waren inline mit der "Leader Board" div ich habe.
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>hier ist meine Website, so dass Sie das Problem selbst sehen können:
Jede Hilfe ist sehr willkommen, danke!
https://css-tricks.com/fighting-the-space-between-inline-block-elements/ – CBroe
Bitte setzen Sie diesen Code beantworten finden in [jsfiddle] (https: //jsfiddle.net/), damit andere dies leicht debuggen können. –