Kevin Powell - Community•2y ago

Flex box issue

I have a parent div which has two child div .Parent div flex property the child one has a h1 heading of large size and the other div has a button with border . Due to the flexbox the height of second child is same as the first child . I want to add custom padding for the button but due to flexbox i am unable to add top and bottom padding.I have attached the image . I hope you understand my question

10 Replies

Chris Bolson•2y ago

If you share some code it will make it easier for somebody to help you. In theory there is no reason why you can't add top and bottom padding but without seeing your code it is impossible to know what might be causing your issue.

MoniOP•2y ago

    <nav class="navbar">
        <!-- LOGO -->
        <div class="logo"><img src="images/logo.svg" alt=""></div>

        <!-- NAVIGATION MENU -->
        <ul class="nav-links">

          <!-- USING CHECKBOX HACK -->
          <input type="checkbox" id="checkbox_toggle" />
          <label for="checkbox_toggle" class="hamburger">&#9776;</label>

          <!-- NAVIGATION MENUS -->
          <div class="menu">
            <li><a href="#">HOW WE WORK</a></li>
            <li><a href="#">BLOG</a></li>
            <li>
              <a href="#">ACCOUNT</a>
            </li>
            <li class="view-plans"><a href="/">VIEW PLANS</a></li>
          </div>
        </ul>
      </nav>

Css code

.navbar {
    display: flex; 
    justify-content:space-between;
    color: var(--dark-violet);
    font-family: var(--body-font-family);
    font-size: var(--font-size);
    font-weight: bold;
    padding-block: 30px;
    width: 80%;
    margin: 0 auto; 
  }
  .view-plans{
    border: 2px solid black;
    display: inline-block;
    text-align: center; 
    align-items: center;
    padding: 2px;
}
.view-plans a{
    padding: 1.15rem 2.7rem;
    letter-spacing: 1.5px;
}

as you can see in the code i am trying to padding to top and bottom for my view-plans class but it's not working

Chris Bolson•2y ago

By default "a" elements are inline. You can't add padding to inline elements. Try adding display: block; to ".view-plans a"

MoniOP•2y ago

tried but i did not work

Chris Bolson•2y ago

In what way did it not work? I placed your code in a codepen, added display:block to the a selector and the padding was applied https://codepen.io/cbolson/pen/PoxJaEQ

Kevin Powell•2y ago

Yeah, in this case display: block (or inline-block) should work. With the code you shared, the link isn't a flex-item, but from your screenshot it looks like maybe you had more code? Either way, it wouldn't matter, since it's inside the li. The list item might be a flex item, but not the link itself. Add the display: inline-block on the view-plans a

MoniOP•2y ago

this is the issue that i am facing it does not remain aligned with other li elements after applying padding

Chris Bolson•2y ago

As Kevin mentioned, the code that you posted does not create that as it doesn’t have flex. Also that code is missing the ul tags for the list. I have updated my code pen. I have wrapped the li items in a ul and added the following css to this element to make it flex;

 .menu ul{
 display: flex;
  align-items: center;
  gap: 1rem;
}

 .menu ul{
 display: flex;
  align-items: center;
  gap: 1rem;
}

MoniOP•2y ago

Thanks a lot @Chris for your and @Kevin can you explain me what was the misktake i was making and why my code was not working

Chris Bolson•2y ago

The code that you posted didn’t have any flex definitions so I presume that it is different from you actual code. I suspect that what you are missing isn’t the align-items: center; property. This is the property that vertically aligns the flex items in the center.

Gaming

Programming

Flex box issue