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












1
















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






html css css3







share|improve this 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.























    1
















    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






    html css css3







    share|improve this 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.





















      1












      1








      1









      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






      html css css3







      share|improve this question















      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




      html css css3






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Nov 16 '18 at 1:25









      Renato Souza de OliveiraRenato Souza de Oliveira

      5972817




      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.


























          2 Answers
          2






          active

          oldest

          votes


















          2














          use padding-top instead of margin-top.



          <div class="um">
          
            <div class="dois">
          
                <div class="tres" style="padding-top: 50px;">
          
                        conteudo
          
                </div>
          
            </div>
          
</div>





          share|improve this answer































            2














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






            share|improve this answer






























              2 Answers
              2






              active

              oldest

              votes








              2 Answers
              2






              active

              oldest

              votes









              active

              oldest

              votes






              active

              oldest

              votes









              2














              use padding-top instead of margin-top.



              <div class="um">
              
            <div class="dois">
              
                <div class="tres" style="padding-top: 50px;">
              
                        conteudo
              
                </div>
              
            </div>
              
</div>





              share|improve this answer




























                2














                use padding-top instead of margin-top.



                <div class="um">
                
            <div class="dois">
                
                <div class="tres" style="padding-top: 50px;">
                
                        conteudo
                
                </div>
                
            </div>
                
</div>





                share|improve this answer


























                  2












                  2








                  2







                  use padding-top instead of margin-top.



                  <div class="um">
                  
            <div class="dois">
                  
                <div class="tres" style="padding-top: 50px;">
                  
                        conteudo
                  
                </div>
                  
            </div>
                  
</div>





                  share|improve this answer













                  use padding-top instead of margin-top.



                  <div class="um">
                  
            <div class="dois">
                  
                <div class="tres" style="padding-top: 50px;">
                  
                        conteudo
                  
                </div>
                  
            </div>
                  
</div>






                  share|improve this answer












                  share|improve this answer



                  share|improve this answer










                  answered Nov 16 '18 at 1:40









                  Ngoc Hung Long NguyenNgoc Hung Long Nguyen

                  213




                  213

























                      2














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






                      share|improve this answer




























                        2














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






                        share|improve this answer


























                          2












                          2








                          2







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






                          share|improve this answer













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







                          share|improve this answer












                          share|improve this answer



                          share|improve this answer










                          answered Nov 16 '18 at 2:00









                          meqymeqymeqymeqy

                          463




                          463















                              -

                              Popular posts from this blog

                              Florida Star v. B. J. F.

                              Image
                              Florida Star v. B. J. F. From Wikipedia, the free encyclopedia Jump to navigation Jump to search United States Supreme Court case Florida Star v. B. J. F. Supreme Court of the United States Argued March 21, 1989 Decided June 21, 1989 Full case name The Florida Star v. B. J. F. Citations 491 U.S. 524 ( more ) 109 S. Ct. 2603; 105 L. Ed. 2d 443; 1989 U.S. LEXIS 3120; 57 U.S.L.W. 4816; 16 Media L. Rep. 1801 Prior history The Florida Star v. B.J.F., 530 So.2d 286 (1988) Supreme Court of Florida; Florida Star v. B.J.F., 499 So.2d 883 (1986) Fla. Dist. Court of Appeals Holding Florida Stat. § 794.03 is unconstitutional to the extent it makes the truthful reporting of information that was a matter of public record unlawful, as it violates the First Amendment. Court membership Chief Justice William Rehnquist Associate Justices William J. Brennan Jr.  · Byron White Thurgood Marshall  · Harry Blac
                              Read more

                              Error while running script in elastic search , gateway timeout

                              Image
                              0 while running script in elastic search, I got 504 Gateway timeout error. { "query": { "bool": { "filter": { "script": { "script": " doc['creted_date'].date.getMonthOfYear() == 12 " } } } }, "aggs": { "test": { "date_histogram": { "field": "creted_date", "interval": "month", "format": "MMM" }, "aggs": { "cost": { "sum": { "field": "cost" } } }
                              Read more

                              Adding quotations to stringified JSON object values

                              Image
                              0 My stringified object data doesn't include quotation marks around object values, which errors when attempting JSON.parse() : '{ "affiliation": CORPORATE, "userId": 75c35d1c-5d12-4485-8fa8-b2f1551a3e6e }' I need the string to be: '{ "affiliation": "CORPORATE", "userId": "75c35d1c-5d12-4485-8fa8-b2f1551a3e6e" }' I'm using this regex to add quotes to the object keys: var newStr = str.replace(/(['"])?([a-z0-9A-Z_]+)(['"])?:/g, '"$2": '); For instance: '{ affiliation: CORPORATE }' to '{ "affiliation": CORPORATE }' There are only string values in my data, so I don't need to check value types. How can I alter my regex expression to add quotations to
                              Read more