• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS Very basic HTML/CSS question...

cbreemer

New Coder
Hi all,
I'm new here, hoping someone can help me understand a very basic thing, or point out what I'm overlooking.
I'm toying with a very simple set of 3 div's stacked on top of each other:
Code:
<html>
<body>
<div style="background-color:lightblue;"> top </div>
<div style="background-color:wheat;"> middle </div>
<div style="background-color:teal;"> bottom </div>
</body>
</html>

It looks like this:

1.jpg
just how I want it - with no space in between.

But If I make the simple text in the middle div into a heading :

Code:
<html>
<body>
<div style="background-color:lightblue;"> top </div>
<div style="background-color:wheat;"> <h3>middle</h3> </div>
<div style="background-color:teal;"> bottom </div>
</body>
</html>

it looks like this, with added white space which I don't want :

2.jpg
This totally stumps me. I guess my understanding of HTML/CSS is not what I thought it was... or maybe I'm just overlooking something blatantly obvious.
I'd be grateful for any ideas
TIA,

Chris
 

220061

New Coder
@cbreemer something like this right?
1633525427971.png
try this:
Code:
<html>
    <style>
        * {  
            margin: 0;
         }      
    </style>
<body>
<div style="background-color:lightblue;"> top </div>
<div style="background-color:wheat;"> <h3>middle</h3> </div>
<div style="background-color:teal;"> bottom </div>
</body>
</html>

so what is happening here is that I said put on the whole page (that is what the * stands for) a margin: 0;
what does this do? it removes all the extra space around your divs.
I'm pretty bad at explaining things but here is a link to margins.
 

cbreemer

New Coder
Many thanks for your reply ! That works indeed, but I'd never have thought of this. I did try margin:0 on the middle <div> but that didn't make any difference. Turns out that it's the <h2> having its own margin. I can get it right also by using
CSS:
h2 {
    margin:0;
}
but your solution is better of course. Unless there are specific elements I DO want to have a margin. Not sure about that yet.

What I still don't understand is why the margin seems to show up outside the <div> that contains the <h2> ...
 

Krygore

Coder
All elements of a HTML document have default margin and padding settings. As you already noticed above, selecting the h2 element in your CSS and setting the margin and padding to 0 will eliminate the space between the different colors.

Side question:
Are you trying to accomplish a gradient design for the background? If so, you can use a gradient generator such as https://www.colorzilla.com/gradient-editor/ play around with the colors, set the pattern you like and copy and paste the gradient via a link tag in the heading of the page (before the body so the code isn't visible)
 

cbreemer

New Coder
All elements of a HTML document have default margin and padding settings. As you already noticed above, selecting the h2 element in your CSS and setting the margin and padding to 0 will eliminate the space between the different colors.

Side question:
Are you trying to accomplish a gradient design for the background? If so, you can use a gradient generator such as https://www.colorzilla.com/gradient-editor/ play around with the colors, set the pattern you like and copy and paste the gradient via a link tag in the heading of the page (before the body so the code isn't visible)
Thanks ! Yes I know every element has its own decoration. But to my simple mind that should always remain within the enclosing container. Maybe that's where I've been wrong al the time.

I am actually using gradients on the top and bottom div. Useful to know there's a generator for them, but not sure how it pertains to the problem ?
 

Top