html - Unwanted Margin Between Element - Unable to Remove -
there large 'white-space' between 'div: image' , 'div: slider' cannot account for. cannot see have coded margin between 2 elements , no matter seem stylesheet, cannot remove it.
part of code causing this? , clean solutions there? many thanks.
.wrap { margin: 0px auto; width: 80%; margin-top: 10px; padding: 3em 0em; position: relative; color: #fff; } .image { background-image: url("http://www.thestrandnyc.com/d/main/media/destination/__thumbs_1200_700_crop/ny_city.jpg"); background-size: 110% 100%; padding: 0px 0px 210px 0px; border: 1px solid red; } .slider { padding: 2em 0em; background-color: #f4f4f4; position: relative; height: 200px; margin: 0px auto; border: 1px solid red; } .slider p:first-child { color: #fff; background: #35afba; font-size: 2.8em; font-weight: 900; border-radius: 100%; width: 200px; height: 200px; display: inline-block; vertical-align: middle; text-align: center; line-height: 200px; margin: 0em 0em 0em 1.2em; position: absolute; } .slider p:nth-child(2) { color: #ff605f; text-shadow: 0px 0px 2px #ff605f; background: rgba(230, 231, 231, 0.56); font-size: 2.8em; font-weight: 900; border-radius: 100%; width: 200px; height: 200px; display: inline-block; text-align: center; line-height: 200px; margin: 0em 0em 0em 4.5em; position: absolute; }
<body> <div class="image"> <div class="wrap"> <div class="nav"> <h1>resume</h1> <ul> <li>home</li> <li>portfolio</li> <li>skills</li> <li>experience</li> <li>contact</li> </ul> </div> <div class="me"> <h2>andrew hardiman</h2> <p>webdesigner & developer</p> <p>read more</p> </div> </div> </div> <div class="wrap"> <div class="slider"> <p>html</p> <p>css</p> <h3>i design , develop amazing websites sleek, easy-to-navigate , exiting use.</h3> <p>work plan digital marketing mix , achieve better results online.</p> </div> </div>
div.slider
inside div.wrap
, has margin-top
, padding
. cause gap, , removing them solve that.
Comments
Post a Comment