Inline flex-box item padding adjust issues

Question

I would like to adjust the top and bottom padding on a flex-box, but the changes are not displaying in the browser. I think the problem lies in one of the following rules:

.logo
{
  width: 10%;

  display: inline-flex;
}

.nav
{
  display: flex;

  align-items: center;

  background-color: rgba(0, 0, 0, 0.05);

  margin-bottom: 10%;
}

.link-reg
{
  color: black;

  display: inline-block;

  margin-right: 3%;

  text-decoration: none;

  transition: all .2s ease-in;

  background-color: white;

  padding: 1% 2% 1% 2%;

  border-radius: 15em;
}
.link-reg:hover
{
  background-color: rgba(255, 255, 255, 0.7);
}

The padding is set on line 54. A Fiddle is available here. Thank you!

NOTE: I know there is a question like this one, but it is not clear, contains no explanation, and I did not like the solution as shown.

Sounds like you're using Firefox. You shouldn't have the problem in Chrome. http://stackoverflow.com/a/36783414/3597276 — Michael Benjamin, Jan 02 '17 at 00:20
Btw, icons (lock,man silouete) are in different position in Firefox and Chrome, too. Not sure what is intended position? — sinisake, Jan 02 '17 at 01:19
The intended position is as shown: http://tinypic.com/view.php?pic=1z2iqg7&s=9#.WGnXfVw2C70 — steve, Jan 02 '17 at 04:31

score 1 · Accepted Answer · edited May 23 '17 at 10:30

A long with Firefox had a bug report when using percent on flex items, the rules can obviously be interpreted in 2 ways as shown here in Michael's answer

A workaround could be to use em instead

.link-reg {
  color: black;
  display: inline-block;
  margin-right: 3%;
  text-decoration: none;
  transition: all .2s ease-in;
  background-color: white;
  padding: 0.6em 1.2em;
  border-radius: 15em;
}

Sample snippet

* {
  padding: 0;
  margin: 0;
}

html {
  background-image: url("backgnd.jpg");
  background-size: cover;
  font-family: 'Roboto', sans-serif;
}

.logo {
  width: 10%;
  display: inline-flex;
}

.nav {
  display: flex;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.05);
  margin-bottom: 10%;
}

.link-first {
  color: white;
  margin-left: auto;
  margin-right: 3%;
  text-decoration: none;
  transition: color .2s ease-in;
}

.link-first:hover {
  color: rgba(255, 255, 255, 0.7);
}

.link {
  color: white;
  margin-right: 3%;
  text-decoration: none;
  transition: color .2s ease-in;
}

.link:hover {
  color: rgba(255, 255, 255, 0.7);
}

.link-reg {
  color: black;
  display: inline-block;
  margin-right: 3%;
  text-decoration: none;
  transition: all .2s ease-in;
  background-color: white;
  padding: 0.6em 1.2em;
  border-radius: 15em;
}

.link-reg:hover {
  background-color: rgba(255, 255, 255, 0.7);
}

.wrapper {
  background-color: white;
  text-align: center;
  margin-left: 35%;
  margin-right: 35%;
  border-radius: 1em;
  padding-bottom: 3%;
}

.header {
  font-size: 200%;
  font-weight: 300;
  padding-top: 3%;
}

.sub-header {
  font-weight: 300;
  padding-bottom: 10%;
  margin-top: 1%;
}

#un {
  border: 0 none;
  font-size: 120%;
  font-weight: 300;
  display: inline-flex;
  background-color: rgba(0, 0, 0, 0.005);
}

.un-wrapper {
  padding: 3% 5% 3% 5%;
  display: flex;
  align-items: center;
  margin-left: 20%;
  margin-right: 20%;
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 7px;
  margin-bottom: 5%;
  border: 0 solid;
}

#pw {
  border: 0 none;
  font-size: 120%;
  font-weight: 300;
  display: inline-flex;
  background-color: rgba(0, 0, 0, 0.005);
}

.pw-wrapper {
  padding: 3% 5% 3% 5%;
  display: flex;
  align-items: center;
  margin-left: 20%;
  margin-right: 20%;
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 7px;
  border: 0 solid;
}

.submit {
  display: inline-block;
  background-color: rgba(0, 0, 0, 0.8);
  margin-top: 13%;
  padding: 3% 5% 3% 5%;
  border-radius: .5em;
  cursor: pointer;
  transition: all .2s ease-in;
}

.submit:hover {
  background-color: rgba(0, 0, 0, 0.5);
}

.s-text {
  color: white;
}

<!DOCTYPE html>
<html>

  <head>
    <title>Login</title>
    <link href="index.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400" rel="stylesheet">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  </head>

  <body>
    <div class="nav">
      <img src="../footer-logo.png" class="logo">
      <a href="#" class="link-first">Home</a>
      <a href="#" class="link">Community</a>
      <a href="#" class="link-reg">Register</a>
    </div>
    <div class="wrapper">
      <div class="header">
        Hello Again,
      </div>
      <div class="sub-header">
        Please Login
      </div>

      <div class="login-wrapper">
        <div class="un-wrapper">
          <input type="text" id="un" placeholder="Username">
          <i style="margin-left: auto;" class="material-icons">account_circle</i>
        </div>
        <div class="pw-wrapper">
          <input type="password" id="pw" placeholder="Password">
          <i style="margin-left: auto;" class="material-icons">lock</i>
        </div>
        <div class="submit">
          <div class="s-text">
            SUBMIT
          </div>
        </div>
      </div>
    </div>
  </body>

</html>

Inline flex-box item padding adjust issues

1 Answers1