(Solved)Setting the margin of a text inside a div that has a background color

Like the title said, I wanna set the margin of a text (Work) that is inside this div I created.
Because the text is inside the div, now even I set the margin of the text, the whole div’s margin changes. The margin of the text do not. I will post a wanted outcome here. (I prototype I built.)
Now the word: Work will stick at the top of the grey div I created. I want it to look like in the prototype I build.

The whole purpose of this is to create different background color. If I did it wrong, please tell me how to make it right.

Here is my code: http://codepen.io/zhouxiang19910319/pen/jVqbmg?editors=1100

Here is what the site supposed to look.

Perhaps I’m not understanding your question correctly, but if you add padding-top: 25px (or whatever) to .second it will move down. Is that what you mean?

1 Like

LOL. Thanks. That solved my problem…

@jv88899 Also did I do it right??? If I want to have different background color in one website I just create a lot of divs and color them accordingly???

In my opinion, what you are doing works. I still consider myself a beginner, so take what I say with a grain of salt.

Typically, when I want to do different backgrounds on divs, what I would do is create a “color” class that has all of the color attributes that each colored div would share. It could be as simple as creating a class that is:

.color {
background-color: #yourcolor;
}

Then, anytime you want a div to be that color, just add the color class to that div. This can prevent you from having to write the same code over and over again, especially when all of the colored divs are going to be the same color. Does that make sense?

1 Like

Your idea is great. But how do I “add the color class to the div”???
Could you do a little example using codepen???
Something like this: (I do not know how to continue after this…)
You can share that example here so I can see how you do it.

http://codepen.io/zhouxiang19910319/pen/XNKLKv

Actually it is as easy as adding color inside the class parenthesis.

So, in your example, if you want div two to be colored, you would write

 <div class="two color">
   <h1>div 2</h1>
 </div>

Your css would then be something like

.color {
background-color: rgb(0, 0, 255);
}

which in this case would give you a blue background. An element (in this case your div) can have multiple classes so you can simply add the class name after the class of two.

Hope that makes sense!

*Sorry for the late reply.

I tried, did not work. Here’s the code. http://codepen.io/zhouxiang19910319/pen/XNKLKv

So it looks like the issue is with your “rgb” code. It should be rgb(0, 0, 255) and it looks like you wrote rgb (0, 0, 255). If you remove the space between the “b” and the “(” your code should work.

WOW. Thanks! It worked!!!:grin: :tada: