Another css margin padding

I have done a SitePoint search on margin. Lots of hits. I don’t get it.

I want an h3 title for each div within my main div (e.g. header nav main aside footer). with centered text between two horizontal lines. the horizontal lines are to be within the h3 background.

Cannot get it done. I can do a workaround by creating a repeating gif for background of course. But I would like to know why the attached sample does not work.

tryit1.html (697 Bytes)

(Ultimately, of course, I will define in ems and percentages rather than pixels my example.)

Hi there Grnadpa,

try it like this…

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>tryit</title>
<!--<link rel="stylesheet" href="screen.css" media="screen">-->
<style media="screen">
.wrapper {
    background-color: #fff0af;
    min-height: 12.5em;
    padding-top: 0.3125em;
    box-sizing: border-box;
 }
h3 {
    padding: 0.3125em 0;
    margin: 0 0 0.3125em;
    border-top: 0.125em solid #b8d4ed;
    border-bottom: 0.125em solid #b8d4ed;
    background-color: #fcfcfc;
    color: #b8d4ed;
    text-align: center;
 }
</style>
</head>
<body>
<div class="wrapper">
 <h3>Purpose</h3>
</div>
</body>
</html>

coothead

1 Like

Hi Grnadpa,

There are two things going on here that I see.

  1. Is collapsing margins on the h3, as coothead has shown you can uncollapse with padding on the wrapper. Another way is with overflow:hidden; which also establishes a new containing block.

  2. Is the text descenders on the h3 text, the stem of the “p” in your case.
    That can be controlled with a line-height that is tall enough to encompass the descenders. It would be fine with a single line of text such as a heading but could cause unwanted space if text were to wrap.

Such as -

.wrapper {
    background-color: #FFF0AF;
    min-height: 200px;
    overflow: hidden;/*un-collapse margins*/
}
h3 {
    background-color: #FCFCFC;
    color: #B8D4ED;
    text-align: center;
    margin: 5px 0;
    line-height: 2.2em; /*added this*/
    border-top: 2px solid #B8D4ED;
    border-bottom: 2px solid #B8D4ED;
}

Your document should have structured headings. If you are using h3 tags they should all be subsections of an h2 which would be a subsection of the h1.

I am guessing that you are choosing an h3 based on it’s default size, if that is the case, don’t do it like that. Rather keep your h tags structured and size the text with the font-size property.

If you are wanting your top/bottom h margins to be consistent through the document you can make the parent divs block containers rather than block boxes. That can be done by setting the parent divs to display:table

By doing that you can maintain control of the h tag margins/paddings directly from the h tag styling. That will keep you from having to mix padding and margins on different elements and chase them down through the entire page. It also makes it easier to make changes as it would only need to be addressed in one spot, the h tag styles.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Template</title>
<style>

.wrap {
    max-width: 1000px;
    margin: 1em auto;
}
header, nav, main, footer {
    display: table;
    width: 100%;
}
header {
    background: palegreen;
}
nav {
    background: red;
}
main {
    height: 300px; /*height acts as min-height with display:table*/
    background: wheat;
}
footer {
    background: aqua;
}
h1, h2 {
    font-size: 1.5em;
    margin: .25rem;
    padding: .35rem;
    text-align: center;
    border-top: 2px solid #B8D4ED;
    border-bottom: 2px solid #B8D4ED;
    background: #FCFCFC;
    color: #B8D4ED;
}
p {
    margin: .25em;
    padding: .25em;
    background: azure;
}

</style>
</head>
<body>

<div class="wrap">
    <header>
        <h1>Header Heading</h1>
        <p>header content</p>
    </header>
    <nav>
        <h2>Nav Heading</h2>
        <p>nav content</p>
    </nav>
    <main>
        <h2>Main Heading</h2>
        <p>main content</p>
        <p>main content</p>
        <p>main content</p>
    </main>
    <footer>
        <h2>Footer Heading</h2>
        <p>footer content</p>
    </footer>
</div>
</body>
</html>
1 Like

Thank you coothead.

What I see is that you added padding to the wrapper (parent) but restricted it to be top only. I notice you left the padding in the h3. And I am not familiar with the three-argument margin specification.

Combined with Ray.H comments below, I think I may have a handle on this now. Thank you again.

BTW
I notice and appreciate your meta additions. I just wanted to provide focus on my dilemma. Except for the viewport, I actually do incorporate these in my project. But thank you for NOT assuming I had. And my stylesheet is a separate file.

Thank you, Ray.H, especially for the explanation and the link. Because of them, I think I now not only know what I need to do, but why and the implications of doing so.

What a wonderful response. Thank you.

1 Like

Hi there Grnadpa,

this margin shorthand…

   margin: 0 0 0.3125em;

…equates to

   margin-top:  0;
   margin-right:  0;
   margin-bottom: 0.3125em;
   margin-left: 0;
 }

Further reading:-

Sitepoint - Introduction to CSS Shorthand

coothead

Actually, no. I just created the tryit1.html inclusion to focus on my issue. Each page of my project has the same h1, an h2 unique to each page and h3s for each div within my main div (of my header, nav, aside, main and footer layout).

My focus is to create a fluid layout. I’ve mostly gotten lost in the process among grids and scss and what-not. My current attempt is through Flexbox.

Nope. Cannot get it to work in my main project. I still have no padding/margin above my h3 border top. Here is the full codestyle.css (2.5 KB)
index.html (1.2 KB)
The style sheet is in gamesonhorses/games folder. The index.html is in the (subfolder) gamesonhorses/games/horseequipment folder

Very good, you’re on the right track!

It looks like you missed the semicolon after the line-height in your ruleset. Actually, you can do away with that now. I thought you were trying to vertically center your text. But keep in mind that both descenders and ascenders are calculated into anonymous text boxes.

You also needed to add em to your 0.25 padding values (.25em).

body > div > main > h3 {
    background-color: #FCFCFC;
    color: #B8D4ED;
    text-align: center;
    margin: 0.25em 0;
    padding: 0.25em 0;
    /*line-height: 2.2em; /* assure handle descenders (below base) */
    border-top: 2px solid #B8D4ED;
    border-bottom: 2px solid #B8D4ED;
}

I commented out the line-height but you can see that I added a semicolon after the 2.2em value.

You can also do away with overflow:hidden here -

body > div > main {
    order: 4;
    min-height: 2.5em;
    flex: 1;
    /*overflow: hidden; /* force block for h3 padding */
}

Since you have placed vertical paddings on the parents here -

body > div > header,nav,main,menu,footer {
    background: #DDC58A;
    border-radius: 7px;
    margin: 5px;
    padding: 20px;
}

I’m not sure (haven’t researched it or tested) but it looks like flexbox layout also creates a containing block. So the padding shown above is not needed to uncollapse margins, rather it is there to do it’s normal job.

That does seem to handle it.

I’m pretty sure I do not understand everything that is going on here – What is flexbox influence and what is the margin / padding dynamic.

One thing for sure is that I could not have figured it out on my own. Thank you so much.

Hi,
As I mentioned in my last post … “it looks like flexbox layout also creates a containing block”.
After reading up on it some more that is indeed the case.

4.2. Flex Item Margins and Paddings
The margins of adjacent flex items do not collapse.

So if the margins of adjacent flex items do not collapse, that means the margins of child elements are not collapsing through the parent.

That can be summed up to say that flex items create a containing block. Or as it is also known in the CSS2 specs, a new block formatting context. As per the link I gave in post #4.

That is what I was doing in previous examples by using overflow:hidden; and display:table;

The whole collapsing margins concept is really only an issue on the first direct child of the parent when that child has vertical margins. That is when you need to control it if your parent backgrounds need to be visible. Collapsing margins in general is not a bad thing, there are times when we want that behavior, such as with several <p> tags stacked in the page.

2 Likes

I give up

Where can I find copies of the images, please?

I realize I’m joining late so forgive my absence of background info.

Grnadpa, have you read:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

If you have not, please DO. You will appreciate it. It is very up-to-date and as easy to follow as flexbox can be. :shifty:

You will still have questions, so don’t hesitate to ask.

2 Likes

Just had to walk away from it for awhile. As it so often happens, what I was trying to do is only hard the way I was trying to do it.

Actually, the issue was not with flexbox.

To recap, what I wanted was a link that appeared to have horizontal lines a few pixels from the upper and lower edges of the container. Obviously (in retrospect) there will be no effect on border placement within the container no matter what I do with margins and padding. And that was what I was trying to do.

My solution was to nest divs. Then put my margin and border on the inner div.

Would you mind posting the relevant code that you are using (HTML and CSS together) and perhaps a screen shot of how it appears in your browser?

Curiosity and all that

Sure. Appreciate the offer.

However, I am restarting from scratch. Hoping to have a “minimum viable product”, as it were, by Sunday evening. Will post it then.

Maybe his codepen will help.

No nested divs required.

1 Like

Thank you, PaulOB, for providing this solution. Test 4 seems to be closest to my need. I sort of understand it. The absolute positioning scares me a bit as I am unclear as to the relative container. So I don’t know how it would perform in flexbox.

It does appear that I avoid nested divs at the expense of a rather more complex css.

I need to get my site up before my wife’s book (which it supports) is published, so I will go with what I have for now. But before I publish future pages that use this format, I will revisit this.

Thanks again.

Came pretty close to getting it done this weekend (30-plus hours). It still has pages that need to be developed, but I am stubbing them and plan to upload them to http://www.GamesOnHorses.com this afternoon or by midday tomorrow.