The margin-top property hits all the divs [duplicate]

This question already has an answer here:

Why does this CSS margin-top style not work?

11 answers

I have three nested DIV elements.
When I insert margin-top into the inside div all others receive the effect.

I need the inside div to have a margin-top relative to the outside div and not the whole block.

I created an example in codepen. I have one div, two div and three div.

Notice that I put the margin-top in div three, but all divs receive the effect.

Does anyone know the reason?

<div class="um">



            <div class="dois">



                <div class="tres" style="margin-top: 50px;">



                        conteudo



                </div>



            </div>



</div>

example codepen

asked Nov 16 '18 at 1:25

Renato Souza de Oliveira

5972817

marked as duplicate by Alohci css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 16 '18 at 2:00

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

add a comment |

This question already has an answer here:

Why does this CSS margin-top style not work?

11 answers

I have three nested DIV elements.
When I insert margin-top into the inside div all others receive the effect.

I need the inside div to have a margin-top relative to the outside div and not the whole block.

I created an example in codepen. I have one div, two div and three div.

Notice that I put the margin-top in div three, but all divs receive the effect.

Does anyone know the reason?

<div class="um">



            <div class="dois">



                <div class="tres" style="margin-top: 50px;">



                        conteudo



                </div>



            </div>



</div>

example codepen

asked Nov 16 '18 at 1:25

Renato Souza de Oliveira

5972817

marked as duplicate by Alohci css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 16 '18 at 2:00

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

add a comment |

This question already has an answer here:

Why does this CSS margin-top style not work?

11 answers

I have three nested DIV elements.
When I insert margin-top into the inside div all others receive the effect.

I need the inside div to have a margin-top relative to the outside div and not the whole block.

I created an example in codepen. I have one div, two div and three div.

Notice that I put the margin-top in div three, but all divs receive the effect.

Does anyone know the reason?

<div class="um">



            <div class="dois">



                <div class="tres" style="margin-top: 50px;">



                        conteudo



                </div>



            </div>



</div>

example codepen

asked Nov 16 '18 at 1:25

Renato Souza de Oliveira

5972817

This question already has an answer here:

Why does this CSS margin-top style not work?

11 answers

I have three nested DIV elements.
When I insert margin-top into the inside div all others receive the effect.

I need the inside div to have a margin-top relative to the outside div and not the whole block.

I created an example in codepen. I have one div, two div and three div.

Notice that I put the margin-top in div three, but all divs receive the effect.

Does anyone know the reason?

<div class="um">



            <div class="dois">



                <div class="tres" style="margin-top: 50px;">



                        conteudo



                </div>



            </div>



</div>

example codepen

This question already has an answer here:

Why does this CSS margin-top style not work?

11 answers

html css css3

asked Nov 16 '18 at 1:25

Renato Souza de Oliveira

5972817

asked Nov 16 '18 at 1:25

Renato Souza de Oliveira

5972817

asked Nov 16 '18 at 1:25

Renato Souza de Oliveira

5972817

asked Nov 16 '18 at 1:25

Renato Souza de Oliveira

5972817

asked Nov 16 '18 at 1:25

Renato Souza de Oliveira

5972817

marked as duplicate by Alohci css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 16 '18 at 2:00

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

marked as duplicate by Alohci css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 16 '18 at 2:00

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

add a comment |

2 Answers
2

active

oldest

votes

use padding-top instead of margin-top.

<div class="um">

            <div class="dois">

                <div class="tres" style="padding-top: 50px;">

                        conteudo

                </div>

            </div>

</div>

answered Nov 16 '18 at 1:40

Ngoc Hung Long Nguyen

213

add a comment |

default value tag div is display:block, add css on um class display:flex

answered Nov 16 '18 at 2:00

meqymeqy

463

add a comment |

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

use padding-top instead of margin-top.

<div class="um">

            <div class="dois">

                <div class="tres" style="padding-top: 50px;">

                        conteudo

                </div>

            </div>

</div>

answered Nov 16 '18 at 1:40

Ngoc Hung Long Nguyen

213

add a comment |

use padding-top instead of margin-top.

<div class="um">

            <div class="dois">

                <div class="tres" style="padding-top: 50px;">

                        conteudo

                </div>

            </div>

</div>

answered Nov 16 '18 at 1:40

Ngoc Hung Long Nguyen

213

add a comment |

use padding-top instead of margin-top.

<div class="um">

            <div class="dois">

                <div class="tres" style="padding-top: 50px;">

                        conteudo

                </div>

            </div>

</div>

answered Nov 16 '18 at 1:40

Ngoc Hung Long Nguyen

213

use padding-top instead of margin-top.

<div class="um">

            <div class="dois">

                <div class="tres" style="padding-top: 50px;">

                        conteudo

                </div>

            </div>

</div>

answered Nov 16 '18 at 1:40

Ngoc Hung Long Nguyen

213

answered Nov 16 '18 at 1:40

Ngoc Hung Long Nguyen

213

answered Nov 16 '18 at 1:40

Ngoc Hung Long Nguyen

213

answered Nov 16 '18 at 1:40

Ngoc Hung Long Nguyen

213

add a comment |

default value tag div is display:block, add css on um class display:flex

answered Nov 16 '18 at 2:00

meqymeqy

463

add a comment |

default value tag div is display:block, add css on um class display:flex

answered Nov 16 '18 at 2:00

meqymeqy

463

add a comment |

default value tag div is display:block, add css on um class display:flex

answered Nov 16 '18 at 2:00

meqymeqy

463

default value tag div is display:block, add css on um class display:flex

answered Nov 16 '18 at 2:00

meqymeqy

463

answered Nov 16 '18 at 2:00

meqymeqy

463

answered Nov 16 '18 at 2:00

meqymeqy

463

answered Nov 16 '18 at 2:00

meqymeqy

463

add a comment |

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Ndtyjky