I really stuck on like a pixel of padding, added on the bottom of table data. I tried to set every padding to zero, I thought it could has something to do with the image inside the table, but after checking the paddings of tags with a Firefox add-on, it HAS to be something with the <td> tag.
I added two pictures which shows, what I mean with the addon (the red border).
/*
************************************************
General-Styling"
************************************************
*/
body,
html {
background-color: aquamarine;
background-image: url(../background.jpg);
height: 100%;
overflow-y: hidden;
margin: 0;
}
#Wrapper {
margin-left: 15%;
margin-right: 15%;
height: 100vh;
}
main {
display: flex;
flex-direction: column;
align-items: center;
width: 80%;
height: calc(100vh - 56px);
background-color: white;
margin: 0;
margin-right: auto;
margin-left: auto;
overflow-y: auto;
border: 1px solid Maroon;
border-top: 0px;
}
main h2 {
margin: 1em;
font-family: 'Anton', sans-serif;
}
main h4 {
font-size: 2em;
}
/*
************************************************
Hier endet General-Styling"
************************************************
*/
/*
************************************************
Hier beginnt das Header-Styling"
************************************************
*/
header {
position: relative;
background-color: blueviolet;
margin: 0;
display: flex;
justify-content: space-between;
align-items: center;
flex: 0 1 60%;
padding: 0 1rem;
border-radius: 0em 0em 1em 1em;
height: 56px;
}
header img {
width: 2.5em;
height: 2.5em;
}
#branding {
position: absolute;
left: 2em;
margin: 0;
margin-left: 0.3em;
font-family: 'Yanone Kaffeesatz', sans-serif;
color: lawngreen;
}
.nav {
display: flex;
flex: 0 1 25%;
justify-content: space-between;
align-items: center;
}
.navitem {
list-style: none;
}
.navitem a {
font-size: 20px;
margin-top: 0;
color: black;
text-decoration: none;
font-family: 'Anton', sans-serif;
}
.navitem a {}
.navitem a:hover {
color: rgba(0, 0, 0, 0.6);
cursor: pointer;
}
/*
************************************************
Header-Styling ENDE
************************************************
*/
/*
************************************************
Hier beginnt das Tabellen-Styling"
************************************************
*/
table {
padding: 1em;
padding-left: 0em;
padding-right: 0em;
background-color: lightgray;
max-width: 80%;
}
table th {
font-size: 1.5em;
}
table td {
padding-bottom: 0em;
font-size: 1.3em;
font-weight: 700;
text-align: center;
border-right: 1px solid gray;
border-bottom: 1px solid gray;
}
table td:nth-child(2) {
width: 30%;
}
table td:last-child {
border-right: 0px;
padding: 0em;
width: 10em;
}
table td:first-child {
width: 0.5em;
padding: 0em;
}
td img {
height: 11em;
width: 11em;
padding: 0em;
margin: 0em;
}
table tr {
padding: 0em;
margin: 0em;
}
/*
************************************************
Tabellen-Styling ENDE
************************************************
*/
/*
************************************************
Hier beginnt das Formular Styling
************************************************
*/
form {
margin: 4em;
padding: 3em;
background-color: slategray;
}
form div {
margin-bottom: 1em;
}
.forms {
display: flex;
align-items: center;
}
.forms label {
display:inline-block;
width: 7em;
font-size: 1.3em;
}
.centered {
display: flex;
width: 100%;
justify-content: center;
}
.centered h3 {
font-size: 2em;
}
/*
************************************************
Formular-Styling ENDE
************************************************
*/<!DOCTYPE html>
<html>
<head>
<title>Einfache-Rezepte</title>
<link href="https://fonts.googleapis.com/css?family=Anton|Baloo+Bhaijaan|Gloria+Hallelujah|PT+Sans+Narrow|Righteous|Titillium+Web|Yanone+Kaffeesatz" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<link rel="stylesheet" href="CSS/normalize.css">
<link rel="stylesheet" href="CSS/style.css">
<meta name="description" content="Diese Seite wird im Laufe der Zeit (hoffentlich) Rezepte beinhalten">
</head>
<body>
<div id="Wrapper">
<header>
<img src="logo.png">
<h1 id="branding">Einfache-Rezepte</h1>
<ul class="nav">
<li class="navitem active"><a href="index.html">Startseite</a></li>
<li class="navitem"><a href="#">Rezepte</a></li>
<li class="navitem"><a href="contact.html">Kontakt</a></li>
</ul>
</header>
<main>
<h2>Einfache Rezeptideen für jeden leicht zu machen!</h2><br>
<h4>Top Rezepte der Woche</h4>
<table>
<tbody>
<tr>
<th>Nummer</th>
<th>Gericht</th>
<th>Zeit</th>
<th>Bild</th>
</tr>
<tr>
<td>1</td>
<td>Lendchen - herzhaft gefüllt</td>
<td>25 Minuten</td>
<td><img src="lendchenpg.jpg"></td>
</tr>
<tr>
<td>2</td>
<td>Hähnchenkeulen alla Ossobuco</td>
<td>18 Minuten</td>
<td><img src="haehnchenkeulen.jpg"></td>
</tr>
<tr>
<td>3</td>
<td>Filetspitzenragout und Paprika-Pesto-Reis</td>
<td>90 Minuten</td>
<td><img src="filetspitzenragout.jpg"></td>
</tr>
</tbody>
</table>
</main>
</div>
</body>
</html>td padding:
img padding:
