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 I ensure that an absolutely positioned element [created with React] snaps to the edge of its parent div when the page loads

I am currently developing a unique two-thumb slider bar component using React. Each thumb in the slider snaps to the closest discrete tick so that users can easily select values along a number line visually. One challenge I'm facing is that the thumbs ...

htmlcssreactjs

Is it possible to avoid widows in CSS without the need for extra HTML elements?

I have a snippet of text that is controlled within a Content Management System. The CMS restricts the use of HTML or special characters such as &nbsp; or <span>. Despite my attempts to adjust margins and padding, I cannot achieve the desired out ...

htmlcsscontent-management-systemwhitespaceword-wrap

The issue of Bootstrap dynamic tabs retaining their active state even after switching tabs, leading to elements being stacked

For my university project, I am developing a website that resembles a text editor using Bootstrap as the framework. To create the website menus, dynamic tabs have been utilized. The following is the code snippet I have implemented: <!--Bootstrap ...

javascripthtmlcssbootstrap-5

Prevent clicks from passing through the transparent header-div onto bootstrap buttons

I have a webpage built with AngularJS and Bootstrap. It's currently in beta and available online in (German and): teacher.scool.cool simply click on "test anmelden" navigate to the next page using the menu This webpage features a fixed transparent ...

javascriptcssangularjstwitter-bootstrap

Leveraging the power of PHP includes with nested subdirectories

Hello, I recently configured my web server to run all .html files as .php files, allowing me to utilize the php include function, which has been very beneficial. However, I have various subdirectories with multiple files in each one. Homepage --banners ...

phphtmlcssphp-include

Broken image path in the Model-View-Controller framework

When using the jQuery DatePicker plugin in my MVC application, I face an issue with displaying a certain image for the Calendar pop-up. Here is the code snippet: $.datepicker.setDefaults({ showOn: "both", buttonImage: "../images/Calendar.png", ...

jquerycssasp.net-mvcimagesrc

Is there a way to position a div on top of the header with flexbox?

I am a beginner in the world of coding and I am currently experimenting with flexbox to create the layout for my website. However, I am facing a challenge where I need to overlay some text and an image on top of the pink rectangular section that is part of ...

htmlcssflexbox

placed three blocks inside the table cell

Is there a way to align three blocks in the table-cell layout so that p1 is at the top, p2 is at the bottom, and p3 is in the middle? Here is the corresponding HTML: <div id="table"> <div id="row"> <div id= ...

htmlcss

Unable to input Email ID and Password within a Selenium Java script for a Bootstrap dropdown menu on the website "https://qa01.pdng.pepsico.com/" without using a frame

To place your Email ID and Password into the appropriate input fields with IDs j_username and j_password, refer to the following HTML code snippet. There are no frames within this code preventing its utilization. ul class="nav__links nav__links--shop_in ...

htmlselenium

the quickest method to apply font-weight:bold; to the text within the component

Is there a way to apply font-weight: bold; only to the inner content of a component in a scss file while avoiding affecting the component tag itself? :host { font-weight: bold; } Although this code works, it also affects the component tag itself. What ...

cssangularsass

What is preventing me from loading js and css files on my web pages?

I have developed a web application using SpringMVC with Thymeleaf and I am encountering an issue while trying to load javascript and CSS on my HTML5 pages. Here is a snippet from my login.html: <html xmlns="http://www.w3.org/1999/xhtml"> <head&g ...

javascripthtmlcssspring-mvc

Angular 7/8 now allows for empty strings in Template Driven Forms

I've encountered a problem with my form validation that allows empty strings. The required attribute works, but it still allows the user to input spaces. I came across a solution online which involves using ng-pattern with the pattern pattern=".*[^ ]. ...

htmlangularvalidationtemplates

Turn off automatic vertical scrolling when refreshing thumbnails with scrollIntoView()

My Image Gallery Slider has a feature that uses ScrollIntoView() for its thumbnails, but whenever I scroll up or down the page and a new thumbnail is selected, it brings the entire page back to the location of that thumbnail. Is there a way to turn off t ...

javascripthtmljquerycsssass

Instructions on how to load an HTTP file inside a Bootstrap modal

Is it possible to load a file located at an http:// address into a modal window? Something like this: <a class="btn btn-info btn-large" data-toggle="modal" href="#http://localhost/login.html"> <i class="icon-user icon-white"></i> Login ...

csstwitter-bootstrap

What is the method for configuring automatic text color in CKEditor?

Is there a way to change the default text color of CKEditor from #333333 to #000000? I have attempted to modify the contents.css in the plugin folder: body { /* Font */ font-family: sans-serif, Arial, Verdana, "Trebuchet MS"; font-size: 12px; ...

javascripthtmlcssckeditoreditor

Obtain the state name after selecting it from the drop-down menu and clicking the submit button (part 3)

Read more about passing city names from PHP to JS in the second part of this discussion on Stack Overflow. This is the JSON data for states ($stateJsonObject): Array ( [0] => stdClass Object ( [stateId] => s1 [stateName] => Kuala Lumpur) ...

phphtmljson

How can I filter rows in HTML using Vue.js based on string options?

When selecting different options, I want to dynamically add new rows. For instance, if "kfc" is selected, a specific row should be added. If "cemrt" is chosen, another row needs to be included. <div class="card-content" v-for="(bok, index) in rules" :k ...

javascriptjqueryhtmlvue.jsvue-component

Exploring different options for parsing HTML content and extracting text from strings that do not contain HTML/XML tags

When looking at this particular solution for stripping HTML tags from a string, the process involves passing the string to rvest::read_html() in order to generate an html_document object. Subsequently, this object is input into rvest::html_text() to obtai ...

htmlrxmlrvestdata-wrangling

Editable content <div>: Cursor position begins prior to the placeholder

Having an issue with a contenteditable div where the placeholder text starts behind the cursor instead of at the cursor position. Any suggestions on how to correct this? <div id="input_box" contenteditable="true" autofocus="autofocus" autocomplete="o ...

javascripthtmlcss

What is causing the "draggable='true'" attribute to fail on a React-rendered component?

This situation is really frustrating me, and I am hoping that someone can offer some assistance. I'm working with a React.Component that looks like this: var Vehicle = React.createClass({ ondragend: function(e) { e.preventDefault(); ...

htmlreactjsdraggable