Tell us what’s happening:
I am trying to understand somene else’s code for the purpose of learning.
Bellow code provides a perfect fit for elements: inner-container, pad-bank and drum-pad.
$padWidth: 100px;
$padHeight: 80px;
@import url('https://fonts.googleapis.com/css?family=Russo+One');
body {
font-family: Russo One;
}
body {
user-select: none;
background-color: lighten(grey, 5%);
}
#root {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.inner-container {
outline: 5px solid orange;
position: relative;
width: 660px;
text-align: center;
background-color: lighten(grey, 20%);
.pad-bank {
border: solid red;
width: $padWidth * 3 + 32;
height: $padHeight * 3 + 32;
display: inline-block;
margin: 20px;
.drum-pad {
border:solid black;
position: relative;
float: left;
width: $padWidth;
height: $padHeight;
margin-right: 10px;
border-radius: 5px;
padding-top: 35px;
box-sizing: border-box;
cursor: pointer;
}
}
//code...
Perfect fit looks like this:
When I change “pad-bank” element, in a way to delete +32, the code looks like this:
$padWidth: 100px;
$padHeight: 80px;
@import url('https://fonts.googleapis.com/css?family=Russo+One');
body {
font-family: Russo One;
}
body {
user-select: none;
background-color: lighten(grey, 5%);
}
#root {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.inner-container {
outline: 5px solid orange;
position: relative;
width: 660px;
text-align: center;
background-color: lighten(grey, 20%);
.pad-bank {
border: solid red;
width: $padWidth * 3;
height: $padHeight * 3 + 32;
display: inline-block;
margin: 20px;
.drum-pad {
border:solid black;
position: relative;
float: left;
width: $padWidth;
height: $padHeight;
margin-right: 10px;
border-radius: 5px;
padding-top: 35px;
box-sizing: border-box;
cursor: pointer;
}
}
//code
and the screen looks like this:
Questions:
I assume I am adding 32 pixels. Correct?
How do I know I should be adding 32 to make a perfect fit and not some other number? Where does this 32 come from?
Many thanks.
Your code so far
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.69 Safari/537.36
Challenge: Build a Drum Machine
Link to the challenge: