Better styling for Heading and Paragraph

HTML & CSS
1

Not sure why this became a problem, but I don’t like the way my headings and paragraphs are behaving.

Currently, I have these styles in place…

#solution h2{
    padding: 1rem 0 0 0;
}
p{
    padding: 0 0 1rem 0;
}

The problem is that in the copy I am working on, there is a series of < h2 >< p > combinations, and the spacing the ending < p > and the starting < h2 > is too great.

I am wondering if using margins would be better since they collapse.

Advice?

2

It’s hard to tell w/o seeing the complete rules. I will assume that you are having issues when you have an H2 AFTER a P, otherwise it doesn’t seem like the two paddings would add up and I might suspect that in that case it may be other rules conflicting. Oh, and I would avoid rules with IDs unless absolutely necessary.

Margin collapse happens ONLY IF there is no VERTICAL padding or border between elements. so if you are SURE you will have no borders, or padding margins could be a way to handle this.

reset all the paddings down to zero then t use a " lobotomized owl " pattern:
*+p{ margin-top:1rem;} this will put exactly one REM of space after any between any element an a paragraph.

hope that helps

3

Can you throw up a Codepen to demonstrate the problem?

4 
<!doctype html>
<html lang="en">
<head>
    <style>
        html, body, address, blockquote, p, div,
        h1, h2, h3, h4, h5, h6,
        ul, ol, li, dl, dt, dd,
        table, tr, th, td,
        form, fieldset, caption, br, hr, img,
        header, footer, nav, section, article, aside{
            margin: 0;
            padding: 0;
        }
        
        p{
            /*margin: 0 0 1rem 0;        /**/
            padding: 0 0 1rem 0;        /**/
        }
        
        #features h2{
            /*margin: 1rem 0 0 0;        /**/
            padding: 1rem 0 0 0;        /**/
        }

    </style>
</head>
<body>
    <h1>Log Cabins</h1>
    <p>Maecenas vehicula varius metus, vitae dictum lectus euismod aliquet. Donec in metus vel tellus malesuada pharetra ac eget orci. Vestibulum mattis viverra turpis, quis dictum urna molestie sit amet. Nullam lacinia vehicula euismod. Maecenas ac laoreet quam. Nulla congue ex turpis, vitae pulvinar elit sagittis ut. Sed vitae mi lectus. Sed mattis porta erat ac pharetra. Phasellus consectetur tempor varius. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam facilisis ultricies odio, vehicula cursus odio consectetur et. Duis eu laoreet dui. Suspendisse nibh metus, varius sed hendrerit id, rutrum sit amet magna. Donec rutrum molestie porttitor. Praesent in sem sit amet dolor accumsan porta.</p>

    <div id="features">
        <h2>Feature 1</h2>
        <p>Maecenas vehicula varius metus, vitae dictum lectus euismod aliquet. Donec in metus vel tellus malesuada pharetra ac eget orci. Vestibulum mattis viverra turpis, quis dictum urna molestie sit amet. Nullam lacinia vehicula euismod. Maecenas ac laoreet quam. Nulla congue ex turpis, vitae pulvinar elit sagittis ut. Sed vitae mi lectus. Sed mattis porta erat ac pharetra. Phasellus consectetur tempor varius. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam facilisis ultricies odio, vehicula cursus odio consectetur et. Duis eu laoreet dui. Suspendisse nibh metus, varius sed hendrerit id, rutrum sit amet magna. Donec rutrum molestie porttitor. Praesent in sem sit amet dolor accumsan porta.</p>

        <h2>Feature 2</h2>
        <p>Maecenas vehicula varius metus, vitae dictum lectus euismod aliquet. Donec in metus vel tellus malesuada pharetra ac eget orci. Vestibulum mattis viverra turpis, quis dictum urna molestie sit amet. Nullam lacinia vehicula euismod. Maecenas ac laoreet quam. Nulla congue ex turpis, vitae pulvinar elit sagittis ut. Sed vitae mi lectus. Sed mattis porta erat ac pharetra. Phasellus consectetur tempor varius. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam facilisis ultricies odio, vehicula cursus odio consectetur et. Duis eu laoreet dui. Suspendisse nibh metus, varius sed hendrerit id, rutrum sit amet magna. Donec rutrum molestie porttitor. Praesent in sem sit amet dolor accumsan porta.</p>

        <h2>Feature 3</h2>
        <p>Maecenas vehicula varius metus, vitae dictum lectus euismod aliquet. Donec in metus vel tellus malesuada pharetra ac eget orci. Vestibulum mattis viverra turpis, quis dictum urna molestie sit amet. Nullam lacinia vehicula euismod. Maecenas ac laoreet quam. Nulla congue ex turpis, vitae pulvinar elit sagittis ut. Sed vitae mi lectus. Sed mattis porta erat ac pharetra. Phasellus consectetur tempor varius. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam facilisis ultricies odio, vehicula cursus odio consectetur et. Duis eu laoreet dui. Suspendisse nibh metus, varius sed hendrerit id, rutrum sit amet magna. Donec rutrum molestie porttitor. Praesent in sem sit amet dolor accumsan porta.</p>

        <h2>Feature 4</h2>
        <p>Maecenas vehicula varius metus, vitae dictum lectus euismod aliquet. Donec in metus vel tellus malesuada pharetra ac eget orci. Vestibulum mattis viverra turpis, quis dictum urna molestie sit amet. Nullam lacinia vehicula euismod. Maecenas ac laoreet quam. Nulla congue ex turpis, vitae pulvinar elit sagittis ut. Sed vitae mi lectus. Sed mattis porta erat ac pharetra. Phasellus consectetur tempor varius. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam facilisis ultricies odio, vehicula cursus odio consectetur et. Duis eu laoreet dui. Suspendisse nibh metus, varius sed hendrerit id, rutrum sit amet magna. Donec rutrum molestie porttitor. Praesent in sem sit amet dolor accumsan porta.</p>
    </div>
</body>
</html>
5

Yes, it would probably be better to use margins because margins collapse.

OTOH, you could also “reset” the margins to zero and set the padding to .5rem and accomplish the same look here.

(I’d probably go with margins in this example.)

6

I threw up a Codepen of the code above to help understanding

7

This is how I have a heading and blurb:

<?php
/*
SQL Query  loop contents:
    #[0] => id
    #[1] => xrl
    #[2] => title
    #[3] => memo
*/
foreach($jotdNew as $key => $row):

    echo '<div class="p42 bdr bd2 bg4">';
      echo '<h3 class="bd3">' .$row[2] .'</h3>';  
      echo nl2br($row[3]);  
      $socialUrl = $row[1]; // different for each social button 
      require VIEWPATH .'_atemplate/incs/_social-btns.php';
    echo '</div>';  

  // common spacer link to images
     echo FP_LINK;

endforeach;

``` .p42 {padding:.42em}. .bdr {border-radius:.88em} .bd2 {border:1px solid red} .bd3 {margin:-.22em 0 2em; .bg4 {background-color:#ffebfa} 

Edit:
I have had problems with trailing space after Imgs, Divs. Ps, etc  and prefer removing trailing space and adding a space before rendering blocks.
8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.