1

I am trying to nest a div tag and set margin-top so that it sets the distance from the top of the inner div to the top of the outer element. However, when try the code below, there is no margin between the top of the nested element, rather the margin applies to the top of the outer element.

      .header {
        width: 100%;
        height: 110px;
        text-align: center;
      }
      .title {
        margin-top: 25px;
        font-size: 30px;
      }
 

    <div class="header">
      <div class="title">Title</div>
    </div>

enter image description here

AliNajafZadeh
  • 1,216
  • 2
  • 13
  • 22
Musical Shore
  • 1,361
  • 3
  • 20
  • 41

3 Answers3

2

Adding display: inline-block to .header will make it wrap around .title and margin will be relative to the parent div.

.header {
  width: 100%;
  height: 110px;
  text-align: center;
  background-color: yellow;
  display: inline-block;
}
.title {
  margin-top: 25px;
  font-size: 30px;
}
<div class="header">
  <div class="title">Title</div>
</div>
Muhammet
  • 3,288
  • 13
  • 23
1

you can try this one:

.header {
    width: 100%;
    height: 110px;
    text-align: center;
     background-color:gray;
     display: inline-block;
     clear:both;
     }
  .title {
    margin-top: 25px;
    font-size: 30px;
   
  }

or

.header {
    width: 100%;
    height: 110px;
    text-align: center;
     background-color:gray;
     overflow: hidden;
     }
  .title {
    margin-top: 25px;
    font-size: 30px;
   
  }


.header {
    width: 100%;
    height: 110px;
    text-align: center;
     background-color:gray;
     overflow: hidden;
     }
  .title {
    margin-top: 25px;
    font-size: 30px;
   
  }
<div class="header">
  <div class="title">Title</div>
</div>

DEMO

AliNajafZadeh
  • 1,216
  • 2
  • 13
  • 22
Ivin Raj
  • 3,448
  • 2
  • 28
  • 65
1

Try to add this in your style may help you

      .header {
        width: 100%;
        height: 110px;
        text-align: center;
        display: table;
         margin: 0 auto;
      }
      .title {
        margin-top: 25px;
        font-size: 30px;
        display: table-cell;
        vertical-align: middle;
      }
<div class="header">
  <div class="title">Title</div>
</div>
AliNajafZadeh
  • 1,216
  • 2
  • 13
  • 22
Anubhav pun
  • 1,323
  • 2
  • 8
  • 20