How can I add a bottom margin using flexbox? - html

Question

I am having difficulty understanding what to do in this scenario. I am just getting acquainted with flexbox, and I see that it stretched the children to fit the height of the parent flexbox element. I'm just trying to build some simple components without relying on bootstrap, and here I have some nested divs, with the main content being wrapped in a div with display set to flexbox, so that I can have a row of items going across like a magazine layout. The problem is that I can't set the bottom margin, nor can I set a padding for the bottom. Is there a way for me to use flexbox items and still maintain control of the space between the typography and the border of the outermost div? In the code below, I am specifically referring to the div with ID='mainContentBox". I want to include a space of about 25px between that and the div border. Thanks for your patience. I am just starting to wrap my mind around flexbox. Thanks for taking the time to help me.
#charset "utf-8";
/* CSS Document */
* {
box-sizing: border-box;
}
.rndImg {
width: 120px;
height: 132px;
float: left;
margin-right: 15px;
margin-left: 10px;
margin-bottom: 5px;
shape-outside: circle();
margin-top: 24px;
border: 2px solid blue;
border-radius: 75%;
}
#featured {
position: relative;
width: 85px;
height: 35px;
margin-left: 35px;
top: 12px;
}
#titleBP_1 {
position: absolute;
top: 20px;
left: 40%;
}
#pDate {
position: relative;
left: 77%;
top: 15px;
}
#postOnStrip {
display: inline;
}
#inOne {
width: 500px;
}
#inTwo {
width: 500px;
display: inline;
}
.blogTxt {
width: 480px;
font-family: 'Alegreya', serif;
/* 'Roboto', sans-serif; */
font-size: 13px;
line-height: .8em !important;
letter-spacing: .13em;
text-align: justify !important;
margin-top: 30px;
display: inline;
}
#topBlogReveal {
display: block;
margin-left: 345px;
}
#mainContentBox {
display: flex;
flex-flow: row;
flex-wrap: no-wrap;
justify-content: space-between;
margin-right: 25px;
margin-left: 25px;
padding-bottom: 25px;
}
#marg {
padding-bottom: 25px;
margin-bottom: 25px;
}
#titleStrip {
width: 100%;
height: 50px;
background: Lavender;
overflow: hidden;
}
#postBox {
border: 2px solid blue;
width: 97%;
height: 450px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
background: #CCC;
}
#colorEdge1 {
margin-top: 10px;
background: black;
width: 95%;
height: 475px;
padding: 5px 5px 5px 5px;
z-index: -5;
margin-right: auto;
margin-left: auto;
}
#topBanner {
width: 100%;
height: 120px;
}
.dCap {
float: left;
line-height: 90%;
width: 1.1em;
font-size: 600%;
font-family: georgia;
}
<div id="postBox">
<div id="titleStrip">Featured
<h3 id="titleBP_1">Blog Post #1</h3>
</div>
<div id="postOnStrip">
<p id="pDate"><b>Posted On: </b><em>June 23, 2021</em></p>
<hr class="divider">
</div>
<div id="mainContentBox">
<div id="inOne">
<img id="topBgImg" class="rndImg" src="Images/473a9b83088edfa35bdba1b7691056ad.jpg">
<p class="blogTxt"><span class="dCap">W</span>hat if the opiate epidemic runs deeper than purple bruises and scabrous veins running yup and down the arms of our nation's heroine addicts? What if it isn't just a socio economic problem, nor the result of international
anatagonisms vis a vis the black marget drug trade, but rather the first symptoms of a looming existential crisis for humanity at large. The cancer patient swallows pills to ease the aching malignancy bloomin down there in the organs and tissues,
the mess of physicality from which our consciousness is supposed to arise out of. But someti,es, the cancer patient blajets hersel fin morphine just to kill that deeper ache which starts when one percieves the horizon of their own impending demnise.
And who can blame them Life is hard.</p>
</div>
<div id="inTwo">
<p class="blogTxt">What if the opiate epidemic runs deeper than purple bruises and scabrous veins running yup and down the arms of our nation's heroine addicts? What if it isn't just a socio economic problem, nor the result of international anatagonisms vis a vis
the black marget drug trade, but rather the first symptoms of a looming existential crisis for humanity at large. The cancer patient swallows pills to ease the aching malignancy bloomin down there in the organs and tissues, the mess of physicality
from which our consciousness is supposed to arise out of. But someti,es, the cancer patient blajets hersel fin morphine just to kill that deeper ache which starts when one percieves the horizon of their own impending demnise. And who can blame
them Life is hard.</p>
Read More
</div>
</div>
</div>