使用 div 在 CSS 元素周围创建空白

Question

I want to put all of my elements in a white box. The code before is this:

<form action="/login" method="post">
            <div class='boxput'>
                <input autocomplete="off" autofocus name="username" placeholder="Username" type="text">
            </div>
            <div class='boxput'>
                <input style='position: relative; top: 30px;' name="password" placeholder="Password" type="password">
            </div>
            <button style='position: relative; top: 60px; height: 30px; width: 90px; font-size: 16px;' type="submit">Log In</button>
</form>
    
<div style='position: absolute; top: 28%; transform: translate(-50%, -50%); left: 50%;'>
            <h1 id='log'>Login:</h1>
</div>
    
<div style='position: absolute; display: inline-block; left: 50%; top: 69%; transform: translate(-50%, -50%);'>
            <a href='/signup'>Don't have an account? Sign up here.</a>
</div>

and I have just put a div around it like such:

<div>
        <form action="/login" method="post">
            <div class='boxput'>
                <input autocomplete="off" autofocus name="username" placeholder="Username" type="text">
            </div>
            <div class='boxput'>
                <input style='position: relative; top: 30px;' name="password" placeholder="Password" type="password">
            </div>
            <button style='position: relative; top: 60px; height: 30px; width: 90px; font-size: 16px;' type="submit">Log In</button>
        </form>
    
        <div style='position: absolute; top: 28%; transform: translate(-50%, -50%); left: 50%;'>
            <h1 id='log'>Login:</h1>
        </div>
    
        <div style='position: absolute; display: inline-block; left: 50%; top: 69%; transform: translate(-50%, -50%);'>
            <a href='/signup'>Don't have an account? Sign up here.</a>
        </div>
</div>

Upon further notice I found out that the new div I created was on the top left corner of the screen width a height of 0, which is not where I want it to be. How do I surround my elements with my new div?

Answer 1

Your <div> is working fine, the problem is using of position: absolute , add position: relative; to your <div> to control your chlidren and change left and top children styles to fix your design. read this: https://css-tricks.com/absolute-positioning-inside-relative-positioning/

Answer 2

You have used relative and absolute positioning quite liberally in the code. This can cause issues when you want to surround something with a div since the absolute positioned elements will jump out of the layout structure. Try using some margins to give distance between the elements:

<div style="background-color: white; position: relative; min-height: 16rem">
        <form action="/login" method="post" style="padding-left: 10px">
            <div class='boxput'>
                <input style=' margin-top: 30px;' autocomplete="off" autofocus name="username" placeholder="Username" type="text">
            </div>
            <div class='boxput'>
                <input style=' margin-top: 30px' name="password" placeholder="Password" type="password">
            </div>
            <button style='height: 30px; width: 90px; font-size: 16px; margin-top: 30px' type="submit">Log In</button>
        </form>
    
        <div style='position: absolute; top: 8rem; text-align: center; transform: translate(-50%, -50%); left: 50%;'>
            <h1 id='log'>Login:</h1>
            <a href='/signup'>Don't have an account? Sign up here.</a>
        </div>
    </div>

Here's a link to see how it looks