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
Chris Bolson17mo 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.
Moni
Moni17mo 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
Chris Bolson17mo ago
By default "a" elements are inline. You can't add padding to inline elements. Try adding display: block; to ".view-plans a"
Moni
Moni17mo ago
tried but i did not work
Chris Bolson
Chris Bolson17mo 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
Kevin Powell17mo 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
Moni
Moni17mo ago
this is the issue that i am facing it does not remain aligned with other li elements after applying padding
Chris Bolson
Chris Bolson17mo 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;
}
Moni
Moni17mo 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
Chris Bolson17mo 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.
Want results from more Discord servers?
Add your server