html - Why margin-top for inner elements affect the parent margin? -
the problem if seek add together margin-top kid elements (#slider-content-wrap or #inside-div-slider) within there parent (#slider) margin-top force parent not kid elements ?
class="snippet-code-css lang-css prettyprint-override"> 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: reddish 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: greenish 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 { 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: grayness 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; } class="snippet-code-html lang-html prettyprint-override"><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>
there 2 ways using can eliminate behaviour. first way apply overflow: hidden parent container i.e. #slider, this:
class="snippet-code-css lang-css prettyprint-override">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: reddish 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 { -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: greenish 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 { 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: grayness 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; } class="snippet-code-html lang-html prettyprint-override"><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 sec way apply display: inline-block kid element i.e. #slider-content-wrap, this:
class="snippet-code-css lang-css prettyprint-override">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: reddish 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 { -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: greenish 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 { 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: grayness 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; } class="snippet-code-html lang-html prettyprint-override"><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>
html css
No comments:
Post a Comment