The secret to achieving perfectly even spacing along the vertical axis

I'm working on a card design that contains a div with 3 elements - 2 headers and a paragraph. I need to ensure there is consistent spacing between each element and the top/bottom of the card. Currently, there seems to be too much margin after the last element at the bottom. How can I achieve uniform vertical spacing in this layout?

Below is the code snippet:

.homeResourcesContainer{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.homeResource{
    padding: 30px;
    margin: 100px; 
    width: 500px;
    height: 450px;
    border-radius: 18px;
    background: #800400;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.9);
}

.homeResourceContent{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    color: white;
    font-family: "Source Sans Pro", sans-serif;
}
<div class="homeResourcesContainer">
    <div class="homeResource">
        <div class="homeResourceContent">
            <h1 class="homeResourceHeader">Courses</h1>
            <p class="homeResourceDescription">Nehemiah University offers a variety of different courses so you have the skills to get to where you want to be.
                Whether it be learning how to operate a forklift, apply for a loan, or even learning about science and math, 
                Nehemiah University will give you the tools to take your personal and proffesional life to the next level. 
                Sign up for a class and find out what it's all about!</p>
            <h2>Click this card to go to the Courses tab!</h2>
        </div>
    </div>

    <div class="homeResource">
        <div class="homeResourceContent">
            <h1>Training Material</h1>
            <p>We want our Nehemiah Family Members to be as succesful as possible in their role. Through proper training and growth initiatives, 
                we strive to ensure each of our Family Members is achieving their full potential. Use these training materials to learn on the job 
                skills such as how to labeler machine, filling out time cards, requesting time off, and many more skills to help you on your Nehemiah Journey!</p>
            <h2>Click this card to go to the Training Materials tab!</h2>
        </div>
    </div>

    <div class="homeResource">
        <div class="homeResourceContent">
            <h1>Resources</h1>
            <p>Need access to resources for personal development? Nehemiah's social service team offers a variety of different resources and connections
                to help you with whatever personal or professional issues you may be experiencing. We want all of our Family Members to have access to professional resources
                that help them grow as individuals. Click the Resources tab to check out our pillars of personal development and the resources we offer!
            </p>
            <h2>Click this card to go to the Resources tab!</h2>
        </div>
    </div>
</div>

htmlcss

Answer №1

Here's a cool CSS trick:

align-items: stretch;

Kudos to this insightful post: How to get flexbox columns to be the same height?

.homeResourcesContainer{
    display: flex;
    align-items: stretch;
    justify-content: center;
    margin-bottom: 20px;
}

.homeResource{
    display: flex;
    flex-direction: column;
    padding: 1em;
    margin: 1em;
    border-radius: 18px;
    background: #800400;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.9);
}

.homeResourceContent{
    height: 100%;
    align-items: center;
    justify-content: space-evenly;
    color: white;
    font-family: "Source Sans Pro", sans-serif;
}
<div class="homeResourcesContainer">
    <div class="homeResource">
        <div class="homeResourceContent">
            <h1 class="homeResourceHeader">Courses</h1>
            <p class="homeResourceDescription">Nehemiah University offers a variety of different courses so you have the skills to get to where you want to be.
                Whether it be learning how to operate a forklift, apply for a loan, or even learning about science and math, 
                Nehemiah University will give you the tools to take your personal and proffesional life to the next level. 
                Sign up for a class and find out what it's all about!</p>
            <h2>Click this card to go to the Courses tab!</h2>
        </div>
    </div>

    <div class="homeResource">
        <div class="homeResourceContent">
            <h1>Training Material</h1>
            <p>We want our Nehemiah Family Members to be as succesful as possible in their role. Through proper training and growth initiatives, 
                we strive to ensure each of our Family Members is achieving their full potential. Use these training materials to learn on the job 
                skills such as how to labeler machine, filling out time cards, requesting time off, and many more skills to help you on your Nehemiah Journey!</p>
            <h2>Click this card to go to the Training Materials tab!</h2>
        </div>
    </div>

    <div class="homeResource">
        <div class="homeResourceContent">
            <h1>Resources</h1>
            <p>Need access to resources for personal development? Nehemiah's social service team offers a variety of different resources and connections
                to help you with whatever personal or professional issues you may be experiencing. We want all of our Family Members to have access to professional resources
                that help them grow as individuals. Click the Resources tab to check out our pillars of personal development and the resources we offer!
            </p>
            <h2>Click this card to go to the Resources tab!</h2>
        </div>
    </div>
</div>

Answer №2

It seems like this is the solution you are looking for.

.homeResourcesContainer{
display: flex;
justify-content: center;
margin-bottom: 20px;
}

.homeResource{
padding: 30px;
margin: 100px; 

border-radius: 18px;
background: #800400;
box-shadow: 5px 5px 15px rgba(0,0,0,0.9);
}

.homeResourceContent{
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
width: 200px;
color: black;
font-family: "Source Sans Pro", sans-serif;
}
<div class="homeResourcesContainer">
    <div class="homeResource">
        <div class="homeResourceContent">
            <h1 class="homeResourceHeader">Courses</h1>
            <p class="homeResourceDescription">Nehemiah University offers a variety of different courses so you have the skills to get to where you want to be.
                Whether it be learning how to operate a forklift, apply for a loan, or even learning about science and math, 
                Nehemiah University will give you the tools to take your personal and professional life to the next level. 
                Sign up for a class and find out what it's all about!</p>
            <h2>Click this card to go to the Courses tab!</h2>
        </div>
    </div>

    <div class="homeResource">
        <div class="homeResourceContent">
            <h1>Training Material</h1>
            <p>We want our Nehemiah Family Members to be as successful as possible in their role. Through proper training and growth initiatives, 
                we strive to ensure each of our Family Members is achieving their full potential. Use these training materials to learn on-the-job 
                skills such as how to use a labeling machine, fill out time cards, request time off, and many more skills to help you on your Nehemiah Journey!</p>
            <h2>Click this card to go to the Training Materials tab!</h2>
        </div>
    </div>

    <div class="homeResource">
        <div class="homeResourceContent">
            <h1>Resources</h1>
            <p>Need access to resources for personal development? Nehemiah's social service team offers a variety of different resources and connections
                to help you with whatever personal or professional issues you may be experiencing. We want all of our Family Members to have access to professional resources
                that help them grow as individuals. Click the Resources tab to check out our pillars of personal development and the resources we offer!
            </p>
            <h2>Click this card to go to the Resources tab!</h2>
        </div>
    </div>

Answer №3

.homeResourcesContainer{
    display: flex;
    /*align-items: center;
    justify-content: center;*/
    margin-bottom: 20px;
}

.homeResource{
    padding: 30px;
    /*margin: 100px; */
    margin: 50px;
    width: 500px;
    /*height: 450px;*/
    border-radius: 18px;
    background: #800400;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.9);
}

.homeResourceContent{
    /*display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;*/
    color: white;
    font-family: "Source Sans Pro", sans-serif;
}
.homeResourceContent h2 {
    margin: 0;  
}
<div class="homeResourcesContainer">
    <div class="homeResource">
        <div class="homeResourceContent">
            <h1 class="homeResourceHeader">Courses</h1>
            <p class="homeResourceDescription">Our university offers an array of courses designed to equip you with the necessary skills for personal and professional growth.
                Whether it's mastering a new skill or diving into science and math, our courses will empower you towards success. Enroll today!
                </p>
            <h2>Click here to explore our Courses tab!</h2>
        </div>
    </div>

    <div class="homeResource">
        <div class="homeResourceContent">
            <h1>Training Material</h1>
            <p>As part of our commitment to your development, we provide training materials 
                aimed at enhancing your skills on the job. From using machinery to managing time effectively, 
                these resources are tailored to support your journey with us.</p>
            <h2>Click here to access Training Materials!</h2>
        </div>
    </div>

    <div class="homeResource">
        <div class="homeResourceContent">
            <h1>Resources</h1>
            <p>In need of personal or professional assistance? Our social service team is dedicated to providing
                valuable resources and connections to help address your challenges. Explore the wide range of services available
                under the Resources tab to support your growth and well-being.</p>
            <h2>Navigate to Resources tab now!</h2>
        </div>
    </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can you master the art of PHP templating like a pro?

Years ago, I started a small PHP website that has since grown into quite a mess. Despite having a separate template for the final HTML output, I still find myself handling a lot of HTML within the 'business logic' part of the code. My main issue ...

phphtmltemplate-enginetemplating

Find and target all CSS elements that have the property of "display: inline

Can the CSS be searched by property:value instead of selector/attribute? Or does this require parsing through a server script? If it is achievable, I am considering developing a script that will automatically include the IE7 hack when the selector contain ...

jquerycss

Could you please advise me on where I should apply line-height in order for it to work properly?

My div is structured like this: I am trying to decrease the spacing between the lines. I attempted adding a line-height attribute to both the parent div and one of the label elements like this: <div class="row" id="gadsDiv" runat=&q ...

htmlcsswhitespaceline-height

Place the div at the bottom of the container with a flexible height determined by the content-wrapper

Can anyone help with a css problem I'm having? I am trying to create two columns, each containing dynamic content and images at the bottom of the column. Here is an example image for reference: https://i.sstatic.net/pvOef.png I want these image bloc ...

htmlcss

What strategies can I employ to prevent my div tags from shifting positions relative to each other?

I spent time formatting a div tag for my main content and then placed that div inside another wrapper div. However, when I tried to add my logo to the site, everything shifted. It appeared as though the div containing the logo had pushed the wrapper down. ...

htmlcss

Animating pseudo-elements using Jquery

I'm having trouble animating the :after pseudo-element of my ul. Below is the CSS code I have: #slider .mypagination ul::after { content: ""; width:25%; bottom: 0; left:0; position: absolute; border-top:1px solid #7accc8; ...

javascriptjquerycss

Why is it that vanilla HTML/JS (including React) opts for camelCase in its styling conventions, while CSS does not follow the same pattern

Each type of technology for styling has its own set of conventions when it comes to naming properties, with camelCase and hyphenated-style being the two main options. When applying styles directly to an HTML DOM Node using JavaScript, the syntax would be ...

javascripthtmlcssconventions

How can I eliminate the black outline added to text by IE CSS filter?

Is there a way to add text-shadows to elements in IE without having a black outline around the text when it is not black? I know IE doesn't support text-shadow property but using filter: property gets pretty close. If anyone has any suggestions or so ...

htmlinternet-explorercss

Verification of user input in open-text fields

After conducting extensive research on form validation in PHP, I realized that most tutorials focus on validating specific fields such as names, emails, or dates using regex. However, I am facing a challenge when it comes to validating free-form fields lik ...

phphtmlvalidationsecurityhtmlspecialchars

How can I switch the default browser in the most recent version of visual studio code?

Question: The default browser is IE, but I am looking to switch to a different browser. How can I make this change? ...

html

Using ASP .NET controls in conjunction with Bootstrap

Is there a way to easily apply bootstrap classes to all asp .net controls in my application at once? Here is an example of how I formatted my menu control using bootstrap. I am looking for a solution where I can apply the bootstrap theme commonly to all m ...

cssasp.nettwitter-bootstrapwebforms

Firefox has trouble with jQuery AJAX as anchor tags in returned HTML are not clickable

The issue at hand: In Firefox, anchor tagged text in the returned HTML is not clickable (no "hand cursor" and no action), while IE 10 seems to handle it without any problems. The scenario: I am utilizing jQuery AJAX to request a PHP page that fetches HTML ...

jqueryhtmlajaxhyperlinkanchor

Use jQuery ajax to send form data and display the received information in a separate div

I'm working on a PHP test page where I need to submit a form with radios and checkboxes to process.php. The result should be displayed in #content_result on the same page without refreshing it. I attempted to use jQuery Ajax for this purpose, but noth ...

phpjqueryhtmlajaxfixed

Issue with Refreshing Header Row Filter Control in Bootstrap Table

Currently in the process of developing an application that utilizes Bootstrap Table and its extension, Filter Control. One feature I've incorporated is individual search fields for each column to enhance user experience. The challenge I'm facing ...

javascripthtmljquerybootstrap-4bootstrap-table

When working with a barcode font in Chrome, using style.fontFamily may not be effective, but utilizing className can achieve the desired result

Take a look at this HTML snippet: <style> .barcode { font-family: 'BC C39 3 to 1 Medium'; } </style> <div><span id='spn'>1234567</span></div> This code will apply a barcode font style: <script> ...

javascriptcssclassname

Generate a unique token through a personalized form

**HTML** <div ref="addCardForm" id="card-element"> <div class="card_digit_text">Credit Card Number <input type="text" id="cardDigit" name="email" placeholder="0000 0000 0000 0000"> </div> ...

htmlvue.jsstripe-paymentsstripe.js

What is the best way to implement rotation functionality for mobile devices when dragging on a 3D globe using D3.js and an HTML canvas?

I have been experimenting with the techniques demonstrated in Learning D3.js 5 mapping to create a 3D globe and incorporate zoom and rotation functionalities for map navigation. Here is the function that handles both zooming and dragging on devices equipp ...

javascripthtmld3.jscanvas

What is the best way to implement horizontal content scrolling when an arrow is tapped in mobile view?

I recently created a JS Fiddle that seems to be working fine on desktop, but in mobile view, the square boxes have horizontal scrolling. Here are the CSS codes I used for this particular issue: @media only screen and (max-width: 767px) { .product-all-con ...

javascriptjquerycssscrollcss-shapes

Make sure that the input field and label are aligned side by side in the

Is there a way to arrange the following HTML in the specified layout? <div> <div> <label>Counterparty</label> <input id="paymentsApp-inpt-cpty" ng-model="selectedPaymentCopy.counterparty" ng-required="true" ...

htmlcss

What is the best way to center my dropdown menu on the page?

Discover my exclusive menu by visiting this link. For those who are curious about the source code, here's the HTML snippet: <div id='menu-container'> <ul id='menu' class="menu"> <li class='active'>& ...

htmlcssdrop-down-menualignment