common class - css margin-top is not working

Question

hello my common class but margin-top or margin-bottom is not working.. thank you

.cl
{

 position: absolute;
    display: inline-block;
 
    width: 100px;
    height: 100px;
    border-radius: 4px;
    background: #6686a7;
    margin-top:150px
 

}

 
<div id="1" class="cl"></div>
<div id="2" class="cl"></div>
<div id="3" class="cl"></div>
<div id="4" class="cl"></div>
......

Your margins are working fine but are meaningless when you set the position to absolute. — Tim Barnett, Jan 05 '17 at 19:01
hi margin: 3em 0 1em 3.6em; I removed but again is not working — ssengul, Jan 05 '17 at 19:04
when you use ```margin``` with position ```absolute```, you need to know your element will ignore the margin, try to use ```top:150px``` — Ryan Wu, Jan 05 '17 at 20:01

score 0 · Answer 1 · answered Jan 05 '17 at 19:04

0

You know that both elements overlap each other, do you? So they're in the very same position. Also you're defining margin-top and margin-bottom with just margin. What do you want to achieve?

answered Jan 05 '17 at 19:04

mcr

1
1

I want vertical div's example div1 margin-top 10 div2 margin-top 10 – ssengul Jan 05 '17 at 19:08
Okay you can do it like this: `
test

test2
.same { position: absolute; display: inline-block; width: 210px; height: 210px; border-radius: 4px; background: #6686a7; } .c1 { margin-top:100px; } .c2 { margin-top:400px; } ` What happens in this code is that you define a standard class that has attribute and values which should be the same in both elements. Classes c1 and c2 define what makes the difference between both elements. – mcr Jan 05 '17 at 19:15
hi thank you but is I tried it..my problem I have multiple div's I can't create class c1 c2 c3 c4 c5 c6..beacuse I'm dynamically creating I and I am giving a dynamic id sample var pageID = page.val() id="dynamic_"+pageID" – ssengul Jan 05 '17 at 19:27
Have you thought about adding the class to the element through a for-loop? In this case you would also be able to do c1 .. cn and creating a new div-element with an id whichs value (id="iterator") equals the size of the itarator (which is defined as variable "i" in a loop). This element with id = iterator could then get a class with "c"+i. Check this link here: http://stackoverflow.com/questions/11398522/create-a-div-using-loop Are you using JQuery? – mcr Jan 05 '17 at 19:45

score 0 · Answer 2 · answered Jan 05 '17 at 19:13

0

You don't need to include margin-top in your CSS (which should also have a semi-colon at the end of the line if you did need it) when you've already declared top and bottom margins prior to that. Your CSS is valid otherwise. Side note: Your divs overlap each other based on the absolute positioning. Not sure if that's something you intended.

answered Jan 05 '17 at 19:13

Justin R.

489
1
5
12

hi margin: 3em 0 1em 3.6em; I removed but again is not working – ssengul Jan 05 '17 at 19:14

score 0 · Accepted Answer · answered Jan 05 '17 at 19:51

0

You need to remove 'position: absolute;' The margin doesn't work with 'position:absolute'

Use below code

.cl{
display: inline-block; 
width: 100px;
height: 100px;
border-radius: 4px;
background: #6686a7;
margin-top:150px}

answered Jan 05 '17 at 19:51

VvV

1,548
12
18

common class - css margin-top is not working

3 Answers3