form 숙제 질문2

2 글 보임 - 1 에서 2 까지 (총 2 중에서)

글쓴이

글

2024년 5월 26일 13:03 #124146

참가자

message와 firs name 폼 사이의 간격을 적용하고 싶은데,
적용이 안됩니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link href="css/main.css" rel="stylesheet">
</head>
<body>
    <div class="main_box">
        <div class="sub_box">
            <h1>contact us</h1>
            <form>
                <div>
                <h3>Your Email</h3>
                <input class="main-email" type="email" placeholder="das@gmail.com">
                </div>
                
                <div class = "first-name">
                    <h3>First name</h3>
                    <input  type="text">
                </div>

                <div class = "last-name">
                    <h3>Last name</h3>
                    <input  type="text">
                </div>

                <div style = "clear : both"></div>

                <div class="message clear-both">
                    <h3>Message</h3>
                    <textarea class="msg-textarea"></textarea>
                </div>
                <br>
                <div class="check-box">
                    <input type="checkbox">Subscribe
                </div>

                <div>
                    <button class="main-button">send</button>
                </div>

            </form>
        </div>
    </div>
</body>
</html>

*{
    margin: 0;
    box-sizing: border-box;
    }

div{
    margin-top:10px;
}

body{
    margin : 0px;
}

.main_box{
    width :450px;
    height : 800px;
    background: #eeee;
    position : relative;
    margin-top : 0px;

.sub_box{
    width : 90%;
    height : 90%;
    background: #eeee;
    position : block;
    margin-left: auto;
    margin-right: auto;
    margin: auto;

.main-email{
    width: 100%;
    margin: auto;
}

.first-name{
    float : left;
    padding-right: 15px;
}

.last-name{
    float : right;
}

.check-box{
    float : left;
}

.main-button{
    background-color: #ff9900; /* 주황색 배경 */
    border: none; /* 테두리 제거 */
    color: white; /* 텍스트 색상 */
    padding: 10px 20px; /* 안쪽 여백 */
    text-align: center; /* 텍스트 가운데 정렬 */
    text-decoration: none; /* 언더라인 제거 */
    font-size: 16px; /* 폰트 크기 */
    font-weight: bold; /* 폰트 굵기 */
    text-transform: uppercase; /* 모든 텍스트를 대문자로 변환 */
    cursor: pointer;
    float : right;   
}

.message-wrap {
    clear: both;
    margin-top: 10px;
}

.message-textarea {
    width: 100%;
}

2024년 5월 26일 15:38 #124168

codingapple

키 마스터

margin-top을 더 높게 줘봅시다

글쓴이

글

2 글 보임 - 1 에서 2 까지 (총 2 중에서)

답변은 로그인 후 가능합니다.

로그인

form 숙제 질문2

https://codingapple.com/wp-content/uploads/2019/06/logo2-3.png