Hello,
Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://kit.fontawesome.com/1f5460a8a6.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Stopwatch</title>
</head>
<body>
<div id="container">
<p id="timeArea">Blank</p>
<!-- <i id="pauseButton" class="fas fa-pause fa-2x"></i> -->
<i id="playButton" class="fas fa-play fa-2x"></i>
<p id="reset">Reset</p>
</div>
<script src="script.js"></script>
</body>
</html>
:root {
--gray: #CBC4C4;
--blue: #029DF1;
--white: #FFF;
--black: #000;
--secondBlue: #0089D3;
}
* {
padding: 0;
margin: 0;
font-family: Roboto, sans-serif;
color: var(--white);
}
#container {
margin: 100px auto;
background-color: var(--blue);
width: 300px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 10px 0px;
}
p, i {
margin-right: 50px;
}
i {
border-left: 1px solid var(--gray);
border-right: 1px solid var(--gray);
padding: 0px 20px;
height: inherit;
color: var(--black);
}
i:hover {
background-color: var(--secondBlue);
}
I am wanting to matching the height of the borders to the amount of padding I have set for my i element. Here is a jsfiddle visualizing how it looks.
What I have done so far is set the height to 100%, given the container div and i element a box-sizing: border-box property, but they have not worked. How can I proceed?