CSS: Why h3 drops down its parent div?

Question

There is a simple example where a div element contains h3.
But the h3 element drops down its parent div when h3 has position relative.
Changing h3 position to absolute solves this problem.
What is the reason?

.personal-details{
  background-color: green;
}

.personal-image{
  display: inline-block;
  width: 150px;
  height: 150px;
  background-color: white;
}

.personal-description {
  display: inline-block;
  width: 150px;
  height: 150px;
  background: black;
}


.personal-description h3 {
  position: relative; /*absolute solves the problem*/
}

<div class="personal-details">
    <div class="personal-image"></div>
    <div class="personal-description"><h3 class="name">My Name</h3></div>
</div>

But removing the margin using margin: 0; not solves the problem. — Ahmed Gad, May 01 '16 at 10:28
I see it but still drops the div down. Please change the BG color of .personal-image from green to white to see that no changes made. — Ahmed Gad, May 01 '16 at 10:43

Naresh Teli · Answer 1 · 2016-05-01T11:01:03.593

1

.personal-details{
  background-color: red;
}

.personal-image{
  display: inline-block;
  width: 150px;
  height: 150px;
  background-color: green;
  margin:0;
}

.personal-description {
   float:left;
  display: inline-block;
  width: 150px;
  height: 150px;
  background: black;
  margin:0;
  padding:0;
}


.personal-description h3 {
  margin:0;
  background-color:blue;
 padding:0;
 
  position: relative; /*absolute solves the problem*/
}

<div class="personal-details">
    <div class="personal-image"></div>
    <div class="personal-description"><h3 class="name">My Name</h3></div>
</div>

edited May 01 '16 at 11:01

answered May 01 '16 at 10:31

Naresh Teli

138
1
12

but create a problem it also make all next element so you have to make next element as clear:both; property – Naresh Teli May 01 '16 at 10:46
Thanks for that but it still a solution to a problem we don`t know its reason. Why h3 drops down its parent div? – Ahmed Gad May 01 '16 at 10:50
this all due to margin of h3 and padding of its parent you can view in browser when you open developer tool of it – Naresh Teli May 01 '16 at 11:02
and browser have default flow which answer given by #turnip – Naresh Teli May 01 '16 at 11:05

score 1 · Accepted Answer · edited May 23 '17 at 12:07

This is caused by the default vertical-align: baseline; property of inline-block elements.

Overriding the default with vertical-align: top for your element will get you somewhere like correct:

.personal-details {
  background-color: green;
  vertical-align: middle
}

.personal-image {
  display: inline-block;
  width: 150px;
  height: 150px;
  background-color: green;
}

.personal-description {
  display: inline-block;
  width: 150px;
  height: 150px;
  background: black;
  vertical-align: top;
}

.personal-description h3 {
  position: relative;
  background: yellow;
}

<div class="personal-details">
    <div class="personal-image"></div>
    <div class="personal-description"><h3 class="name">My Name</h3></div>
</div>

Notice I say "somewhere like correct" as you will still have issues with space around the elements (notice the gap below the black square and space between the two child divs). But that is out of the scope of your question and has been dealt with many times before.

score 0 · Answer 3 · answered May 01 '16 at 11:50

May be your are familiar with all the positioning.Firstly, you need to understand about it.There are four possible useful positioning in css which are given below.

Static

Relative

Absolute.

Fixed

-Static positioning:

 It is basically a default position of every element or tag, use of this position will never effect on your element’s state or position.In static we can not use top,left, bottom & right properties.

position:static;

-Relative:

Relative positioning,makes  element or tag movable.Yes, we can move it any where on container.By default it works like an static but we can use left,top,bottom & right in it.

          position: relative; 

          top:50px;

          left:50px;

-Absolute:

   Absolute positioning, get the space according to browser window or container(that may be parent or ancestor) window.If container window’s position set to relative than absolute will get the position according to container.


                position:absolute;

                left:0px;

                right:0px;

Task: Now, make a parent div and it’s two child's and check both relative and absolute.

/* Example */

    </div>
    <div class='box2'>
      <h3>Here my name</h3>
    </div>
</div>

.parent_box{

background-color:grey;

margin-top: 20px;

} .box1{

height:200px;

width: 200px;

background-color:red;

display: inline-block;

}

.box2{

height: 200px;

width: 200px;

background-color:yellow;

display: inline-block;

position: relative;

} .box2 h3{

position: absolute;

/* Working according to it's parent because it's parent div contains relative position now check it by given it left top and remove the position relative of box2*/

}

CSS: Why h3 drops down its parent div?

3 Answers3