CODEWITHSUNDEEP
htmlcss
Mvrk
Mvrk

Reputation: 225

Why margin-top for inner elements affect the parent margin?

The problem is if you try to add margin-top to child elements (#slider-content-wrap or #inside-div-slider) which they are inside there parent (#slider) the margin-top will push the parent NOT the Child elements ?

    header,section,article,small,nav
    {
        display:block;
    }

    body
    {
        font-family: tahoma, verdana, arial, sans-serif;
        font-size: 14px;
        margin:0;
        padding: 0;


        background: #ffffff;
        text-transform: capitalize;
        box-sizing: content-box;
        -moz-box-sizing: content-box;
        -webkit-box-sizing: content-box;
        -o-box-sizing: content-box;

    }

    h1,h2,h3,h4,h5,h6{

        font-weight: bold;
        font-size: 14px;
    }

    /************************************************
          ----------- Header  --------
    *************************************************/
        #body-wrap{
            margin-top: 0;
            padding-top: 0;
            width: 600px;

            margin-left: auto;
            margin-right: auto;
        }

         header{
             margin-top: 0;

             height: 60px;
             background: red url('Images/headerBG.gif') repeat;
            }

         header h3,header ul {


        padding-top: 0;

    }

    header h3{
        float: left;
        padding-left: 21px;
        color: #ffffff;
             }

    #social-links{
        float: right;
        padding: 0;
        padding-right: 20px;
    }
    
    
    
    #social-links li{
        display: inline-block;
        list-style: none;
        padding-left: 13px;
    }


    #social-links li a{
        -moz-transition-duration:1s;
        -ms-transition-duration:1s;
        -webkit-transition-duration:1s;
        -o-transition-duration:1s;
        transition:1s;
    }








    #social-links li a:hover{

        -webkit-transform : scale(1.5);
        -moz-transform : scale(1.5);
        -ms-transform : scale(1.5);
        -o-transform : scale(1.5);
        transform : scale(1.5);


    }

    #social-links input[type=button] {


        padding-right: 21px;
    }


    /************************************************
             ----------- nav  --------
    *************************************************/
  nav{
      clear: both;
      height: 36px;
      background: green url('Images/navBG.gif') repeat;
      margin-bottom: 0;
    }

        nav ul {
      list-style: none;
      display: inline-block;
      margin-top: 0;
      margin-bottom: 0;

            }
    nav ul li {
        padding-top: 10px;

    }

    #main-menu-ul{
        margin-left: 0;
        padding-left: 21px;;
        float:left;

    }

    #main-menu-ul li
    {
        display: inline-block;
        padding-left: 21px;
    }

    #main-menu-ul li a
    {
        color:#FFFFFF;
        text-decoration: none;
        -moz-transition-duration:1s;
        -ms-transition-duration:1s;
        -webkit-transition-duration:1s;
        -o-transition-duration:1s;
        transition-duration:1s;

    }
    #main-menu-ul li a:hover
    {
        color: #8f8f8f;

        -webkit-transform : scale(1.5);
        -moz-transform : scale(1.5);
        -ms-transform : scale(1.5);
        -o-transform : scale(1.5);
        transform : scale(1.5);
    }



    #search-ul{
        float:right;
        padding-right: 22px;
    }


    #search-ul li {
        display: inline-block;



    }

    #search-ul input[type=text]{

        width: 92px;
        height: 14px;
    }


    #search-ul li label {

        color:#FFFFFF;

    }



    #search-ul li input[type=button]

    {

        padding: 0;
        margin: 0;
        font-size: 13px;
        height: 20px;
        margin-left: -4px;

    }

    /************************************************
             ----------- slider  --------
    *************************************************/



   #slider
   {
       clear: both;
       margin-top: 0;
       height: 236px;
       background: gray url('Images/SliderBG.png') repeat-x;


   }


    #slider-content-wrap{
        clear: both;
        width:560px;
        height: 154px;

        margin-left: 20px;
        margin-right: 20px;
        background-color: #3493ff;
       
        

    }
   #inside-div-slider{
       margin-top: 20px;
       background-color: #ffe132;
       height: 100px;
       width:360px;
   }

       
<body>
<div id="body-wrap">

<header>
    <h3>SITE NAME </h3>

    <ul id="social-links">

        <li><a href="http://www.yahoo.com"> <img src="Images/fb.gif"> </a> </li>
        <li><a href="#"> <img src="Images/fb.gif"> </a> </li>
        <li><a href="#"> <img src="Images/fb.gif"> </a> </li>
        <li><a href="#"> <img src="Images/fb.gif"> </a> </li>

    </ul>


</header>

<nav>
   <ul id="main-menu-ul">
       <li><a href="#">Home</a></li>
       <li><a href="#">About</a></li>
       <li><a href="#">Portfolio</a></li>
       <li><a href="#">Blog</a></li>
       <li><a href="#">Contact</a></li>
   </ul>


    <ul id="search-ul">
        <li> <label>Search : <input type="text" id="search-field"> </label> </li>
        <li><input type="button" value="Go!"></li>


    </ul>
</nav>


    <!--********************Slider*******************-->


    <section id="slider"> 
        <div id="slider-content-wrap">
          #slider-content-wrap
            <div id="inside-div-slider">#inside-div-slider</div>


        </div>


        </section>



    <!--********************Slider*******************-->

<section id="footer-section-1"></section>
<section id="footer-section-2"></section>
<footer></footer></div>
</body>

Upvotes: 1

Views: 234

Answers (4)

Manjunath Siddappa
Manjunath Siddappa

Reputation: 2157

Fiddle

http://jsfiddle.net/9d8gq8r2/6/

in #slider remove 

clear: both;
margin-top: 0;

Add 

position:absolute;

Now if you add margin-top to #slider-content-wrap it wont push the parent

It should be like below

#slider
   {
height: auto;
background: gray url('Images/SliderBG.png') repeat-x;
position:absolute;
   }

#slider-content-wrap{
width:560px;
height: 154px;
margin-left: 20px;
margin-right: 20px;
background-color: #3493ff;
margin-top: 20px//added
}

Upvotes: 1

Fahad Hasan
Fahad Hasan

Reputation: 10506

There are two ways using which you can eliminate that behaviour. First way is to apply overflow: hidden to the parent container i.e. #slider, like this:

header,
section,
article,
small,
nav {
  display: block;
}
body {
  font-family: tahoma, verdana, arial, sans-serif;
  font-size: 14px;
  margin: 0;
  padding: 0;
  background: #ffffff;
  text-transform: capitalize;
  box-sizing: content-box;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  -o-box-sizing: content-box;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: bold;
  font-size: 14px;
}
/************************************************
          ----------- Header  --------
    *************************************************/

#body-wrap {
  margin-top: 0;
  padding-top: 0;
  width: 600px;
  margin-left: auto;
  margin-right: auto;
}
header {
  margin-top: 0;
  height: 60px;
  background: red url('Images/headerBG.gif') repeat;
}
header h3,
header ul {
  padding-top: 0;
}
header h3 {
  float: left;
  padding-left: 21px;
  color: #ffffff;
}
#social-links {
  float: right;
  padding: 0;
  padding-right: 20px;
}
#social-links li {
  display: inline-block;
  list-style: none;
  padding-left: 13px;
}
#social-links li a {
  -moz-transition-duration: 1s;
  -ms-transition-duration: 1s;
  -webkit-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition: 1s;
}
#social-links li a:hover {
  -webkit-transform: scale(1.5);
  -moz-transform: scale(1.5);
  -ms-transform: scale(1.5);
  -o-transform: scale(1.5);
  transform: scale(1.5);
}
#social-links input[type=button] {
  padding-right: 21px;
}
/************************************************
             ----------- nav  --------
    *************************************************/

nav {
  clear: both;
  height: 36px;
  background: green url('Images/navBG.gif') repeat;
  margin-bottom: 0;
}
nav ul {
  list-style: none;
  display: inline-block;
  margin-top: 0;
  margin-bottom: 0;
}
nav ul li {
  padding-top: 10px;
}
#main-menu-ul {
  margin-left: 0;
  padding-left: 21px;
  ;
  float: left;
}
#main-menu-ul li {
  display: inline-block;
  padding-left: 21px;
}
#main-menu-ul li a {
  color: #FFFFFF;
  text-decoration: none;
  -moz-transition-duration: 1s;
  -ms-transition-duration: 1s;
  -webkit-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
}
#main-menu-ul li a:hover {
  color: #8f8f8f;
  -webkit-transform: scale(1.5);
  -moz-transform: scale(1.5);
  -ms-transform: scale(1.5);
  -o-transform: scale(1.5);
  transform: scale(1.5);
}
#search-ul {
  float: right;
  padding-right: 22px;
}
#search-ul li {
  display: inline-block;
}
#search-ul input[type=text] {
  width: 92px;
  height: 14px;
}
#search-ul li label {
  color: #FFFFFF;
}
#search-ul li input[type=button] {
  padding: 0;
  margin: 0;
  font-size: 13px;
  height: 20px;
  margin-left: -4px;
}
/************************************************
             ----------- slider  --------
    *************************************************/

#slider {
  clear: both;
  margin-top: 0;
  height: 236px;
  background: gray url('Images/SliderBG.png') repeat-x;
  overflow: hidden;
}
#slider-content-wrap {
  clear: both;
  width: 560px;
  height: 154px;
  margin-left: 20px;
  margin-right: 20px;
  background-color: #3493ff;
  margin-top: 20px;
}
#inside-div-slider {
  margin-top: 20px;
  background-color: #ffe132;
  height: 100px;
  width: 360px;
}
<body>
  <div id="body-wrap">

    <header>
      <h3>SITE NAME </h3>

      <ul id="social-links">

        <li>
          <a href="http://www.yahoo.com">
            <img src="Images/fb.gif">
          </a>
        </li>
        <li>
          <a href="#">
            <img src="Images/fb.gif">
          </a>
        </li>
        <li>
          <a href="#">
            <img src="Images/fb.gif">
          </a>
        </li>
        <li>
          <a href="#">
            <img src="Images/fb.gif">
          </a>
        </li>

      </ul>


    </header>

    <nav>
      <ul id="main-menu-ul">
        <li><a href="#">Home</a>
        </li>
        <li><a href="#">About</a>
        </li>
        <li><a href="#">Portfolio</a>
        </li>
        <li><a href="#">Blog</a>
        </li>
        <li><a href="#">Contact</a>
        </li>
      </ul>


      <ul id="search-ul">
        <li>
          <label>Search :
            <input type="text" id="search-field">
          </label>
        </li>
        <li>
          <input type="button" value="Go!">
        </li>


      </ul>
    </nav>


    <!--********************Slider*******************-->


    <section id="slider">
      <div id="slider-content-wrap">
        #slider-content-wrap
        <div id="inside-div-slider">#inside-div-slider</div>


      </div>


    </section>



    <!--********************Slider*******************-->

    <section id="footer-section-1"></section>
    <section id="footer-section-2"></section>
    <footer></footer>
  </div>
</body>

Or the second way is to apply display: inline-block to the child element i.e. #slider-Content-Wrap, like this:

header,
section,
article,
small,
nav {
  display: block;
}
body {
  font-family: tahoma, verdana, arial, sans-serif;
  font-size: 14px;
  margin: 0;
  padding: 0;
  background: #ffffff;
  text-transform: capitalize;
  box-sizing: content-box;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  -o-box-sizing: content-box;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: bold;
  font-size: 14px;
}
/************************************************
          ----------- Header  --------
    *************************************************/

#body-wrap {
  margin-top: 0;
  padding-top: 0;
  width: 600px;
  margin-left: auto;
  margin-right: auto;
}
header {
  margin-top: 0;
  height: 60px;
  background: red url('Images/headerBG.gif') repeat;
}
header h3,
header ul {
  padding-top: 0;
}
header h3 {
  float: left;
  padding-left: 21px;
  color: #ffffff;
}
#social-links {
  float: right;
  padding: 0;
  padding-right: 20px;
}
#social-links li {
  display: inline-block;
  list-style: none;
  padding-left: 13px;
}
#social-links li a {
  -moz-transition-duration: 1s;
  -ms-transition-duration: 1s;
  -webkit-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition: 1s;
}
#social-links li a:hover {
  -webkit-transform: scale(1.5);
  -moz-transform: scale(1.5);
  -ms-transform: scale(1.5);
  -o-transform: scale(1.5);
  transform: scale(1.5);
}
#social-links input[type=button] {
  padding-right: 21px;
}
/************************************************
             ----------- nav  --------
    *************************************************/

nav {
  clear: both;
  height: 36px;
  background: green url('Images/navBG.gif') repeat;
  margin-bottom: 0;
}
nav ul {
  list-style: none;
  display: inline-block;
  margin-top: 0;
  margin-bottom: 0;
}
nav ul li {
  padding-top: 10px;
}
#main-menu-ul {
  margin-left: 0;
  padding-left: 21px;
  ;
  float: left;
}
#main-menu-ul li {
  display: inline-block;
  padding-left: 21px;
}
#main-menu-ul li a {
  color: #FFFFFF;
  text-decoration: none;
  -moz-transition-duration: 1s;
  -ms-transition-duration: 1s;
  -webkit-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
}
#main-menu-ul li a:hover {
  color: #8f8f8f;
  -webkit-transform: scale(1.5);
  -moz-transform: scale(1.5);
  -ms-transform: scale(1.5);
  -o-transform: scale(1.5);
  transform: scale(1.5);
}
#search-ul {
  float: right;
  padding-right: 22px;
}
#search-ul li {
  display: inline-block;
}
#search-ul input[type=text] {
  width: 92px;
  height: 14px;
}
#search-ul li label {
  color: #FFFFFF;
}
#search-ul li input[type=button] {
  padding: 0;
  margin: 0;
  font-size: 13px;
  height: 20px;
  margin-left: -4px;
}
/************************************************
             ----------- slider  --------
    *************************************************/

#slider {
  clear: both;
  margin-top: 0;
  height: 236px;
  background: gray url('Images/SliderBG.png') repeat-x;
}
#slider-content-wrap {
  clear: both;
  width: 560px;
  height: 154px;
  margin-left: 20px;
  margin-right: 20px;
  background-color: #3493ff;
  display: inline-block;
  margin-top: 20px;
}
#inside-div-slider {
  margin-top: 20px;
  background-color: #ffe132;
  height: 100px;
  width: 360px;
}
<body>
  <div id="body-wrap">

    <header>
      <h3>SITE NAME </h3>

      <ul id="social-links">

        <li>
          <a href="http://www.yahoo.com">
            <img src="Images/fb.gif">
          </a>
        </li>
        <li>
          <a href="#">
            <img src="Images/fb.gif">
          </a>
        </li>
        <li>
          <a href="#">
            <img src="Images/fb.gif">
          </a>
        </li>
        <li>
          <a href="#">
            <img src="Images/fb.gif">
          </a>
        </li>

      </ul>


    </header>

    <nav>
      <ul id="main-menu-ul">
        <li><a href="#">Home</a>
        </li>
        <li><a href="#">About</a>
        </li>
        <li><a href="#">Portfolio</a>
        </li>
        <li><a href="#">Blog</a>
        </li>
        <li><a href="#">Contact</a>
        </li>
      </ul>


      <ul id="search-ul">
        <li>
          <label>Search :
            <input type="text" id="search-field">
          </label>
        </li>
        <li>
          <input type="button" value="Go!">
        </li>


      </ul>
    </nav>


    <!--********************Slider*******************-->


    <section id="slider">
      <div id="slider-content-wrap">
        #slider-content-wrap
        <div id="inside-div-slider">#inside-div-slider</div>


      </div>


    </section>



    <!--********************Slider*******************-->

    <section id="footer-section-1"></section>
    <section id="footer-section-2"></section>
    <footer></footer>
  </div>
</body>

Upvotes: 1

coopersita
coopersita

Reputation: 5041

If I understand your question correctly, it has to do with the block formatting context.

The children are floated, therefore are in a different context than the parent.

Try putting overflow:hidden to the parent, and see if there is a difference.

More about it: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context

Upvotes: 3

user1428451
user1428451

Reputation: 43

The margin-top does not "push" the parent it gives spacing between the child and the parent in your example. padding-top on the child will increase the top of the child which would then push the content within the child down.

Upvotes: 0

Related Questions