0
<html>
    <head>
        <style>
            body{
                margin: 0px;
            }
            .outer{
                width: 500px;
                height: 300px;
                position: relative;
            }
            .innerbg{
                position: absolute;
                background-image: url('https://images.pexels.com/photos/1762851/pexels-photo-1762851.jpeg?cs=srgb&dl=pexels-ann-h-1762851.jpg&fm=jpg');
                background-size: cover;
                width: 100%;
                height: 100%;
                top: 0px;
                left: 0px;
            }
        </style>
    </head>
    <body>
        <div class="outer">
            <div class="innerbg">
            <p>Some content</p>
            </div>
        </div>
    </body>
</html>

You can notice, there is space above the p tag, however, when the position absolute is removed by from the class innerbg, the p tag has no more top space with the view port, why is that?

Nick Parsons
  • 45,728
  • 6
  • 46
  • 64
William Ye
  • 1

1 Answers1

0

The space above the p tag can be removed by using the following CSS:

.p{
   margin-top: 0px;
}
Muhammad Khuzaima Umair
  • 656
  • 6
  • 17