Please tell me, in this sample site with the effect of paralax on css, how to change / remove the indent from above?

https://jsfiddle.net/MaximVelichkin/y5ajjbn1/

/* ============================================================ PRIMARY STRUCTURE ============================================================ */ .container { max-width: 960px; margin: 0 auto; } /* ============================================================ SECTIONS ============================================================ */ section.module:last-child { margin-bottom: 0; } section.module h2 { margin-bottom: 40px; font-family: "Roboto Slab", serif; font-size: 30px; } section.module p { margin-bottom: 40px; font-size: 16px; font-weight: 300; } section.module p:last-child { margin-bottom: 0; } section.module.content { padding: 40px 0; } section.module.parallax { height: 600px; background-position: 50% 50%; background-repeat: no-repeat; background-attachment: fixed; background-size: cover; } section.module.parallax h1 { color: rgba(255, 255, 255, 0.8); font-size: 48px; line-height: 600px; font-weight: 700; text-align: center; text-transform: uppercase; text-shadow: 0 0 10px rgba(0, 0, 0, 0.2); } section.module.parallax-1 { background-image: url("http://www.fonstola.ru/pic/201112/2560x1600/fonstola.ru-63832.jpg"); } section.module.parallax-2 { background-image: url("http://hdoboi.net/uploads/hd/95263_krasivyiy_osenniy_peyzaj.jpg"); } section.module.parallax-3 { background-image: url("http://drobs.ru/opyat/8/peyzazh_priroda_holmy_derevya_zelen_tuman_rassvet_solnce_5576x3087.jpg"); } @media all and (min-width: 600px) { section.module h2 { font-size: 42px; } section.module p { font-size: 20px; } section.module.parallax h1 { font-size: 96px; } } @media all and (min-width: 960px) { section.module.parallax h1 { font-size: 160px; } } 
 <section class="module parallax parallax-1"> <div class="container"> <h1>Serene</h1> </div> </section> <section class="module content"> <div class="container"> <h2>Lorem Ipsum Dolor</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p> </div> </section> <section class="module parallax parallax-2"> <div class="container"> <h1>Rise</h1> </div> </section> <section class="module content"> <div class="container"> <h2>Lorem Ipsum Dolor</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p> </div> </section> <section class="module parallax parallax-3"> <div class="container"> <h1>Calm</h1> </div> </section> <section class="module content"> <div class="container"> <h2>Lorem Ipsum Dolor</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p> </div> </section>

    1 answer 1

    For some elements, browsers add their own styles. Examining the element in the debugger, we find out that this thing happens here. For example, in chrome we have this style:

     :-webkit-any(article,aside,nav,section) h1 { font-size: 1.5em; -webkit-margin-before: 0.83em; -webkit-margin-after: 0.83em; }

    Similar in other browsers. These margins and "burst" our sections, adding empty space.

    Accordingly, we can zakostilyt this for a particular case by nullifying the specific margin with handles.

     section.module.parallax h1 { /* ваш код */ margin-top: 0; margin-bottom: 0; }

    In general, many projects usually have a file with styles named reset.css or browser.css, in which the styles of the agent user are frayed to the root so that there is no confusion.