Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • 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.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • 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...

  • Thread starter Deleted member 2829
  • Start date
D

Deleted member 2829

Guest
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
 
@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.
 
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> ...
 
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)
 
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 ?
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom