• 로그인
  • 장바구니에 상품이 없습니다.

home2 게시판 HTML/CSS 게시판 브라우저 윗부분이 항상 떨어져 있는데 어떡하죠?

브라우저 윗부분이 항상 떨어져 있는데 어떡하죠?

9 글 보임 - 1 에서 9 까지 (총 9 중에서)
  • 글쓴이
  • #7769

    이도아
    참가자

    body에 마진0 줘도 계속 위에서 한 칸 떨어져있어요..
     

    패딩을 0 줘보고 html태그에도 마진,패딩0 줘봤는데 똑같아요

     

    이럴 땐 어떡해야할까요?

    #7775

    codingapple
    키 마스터

    아마 body 태그 안의 div 박스에 상단 마진이 있을듯요? 그것도 없애보도록 합시다.

    박스 두개의 한 변이 겹쳐있으면 margin collapsing 현상이 일어나기 때문입니다

     

     

     

     

    #7777

    이도아
    참가자

    html{
      margin-top: 0;
    }
    body{
      margin: 0;
      margin-top: 0;
    }
    body>div{
      margin: 0;
      margin-top: 0;
    }
    전부 하나씩  다 줘봤는데도 소용없네요 ㅠ 혹시 vs code 사용해서 그런걸까요... 브라켓으로 바꿔봐야겠네요...ㅠㅠ

    #7779

    codingapple
    키 마스터

    에디터는 상관없을걸요 혹은 다른 이상한 스타일 준 요소때문에 그럴 수도 있습니다

    html css 여기 다 올려주시거나 

    너무길면 하단 메일이나 카톡으로 파일 보내셔도 됩니다 

    #7798

    이도아
    참가자

    body{
      margin: 0;
      margin-top: 0;
    }
    .backcolor{
      background-color: cadetblue;
      
    }
    .tablewrap{
      width: 100%;
      max-width: 700px;
      margin: 0 auto;
    }
    table{
    background-color: #fff;
    width: 100%;
    }
    table td, table th{
      border-bottom: 1px solid cadetblue;
      padding: 10px;
    }
    .table-image{
      width: 100px;
    }
    .btn{
      padding: 10px;
      font-size: 20px;
      border: none;
      border-radius: 5px;
      background-color: coral;
      color: #fff;
      cursor: pointer;
      outline: none;
    }
    .btn:hover{
      color: #000;
    }

    #7799

    이도아
    참가자

    <!DOCTYPE html>
    <html lang="ko">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <link rel="stylesheet" href="./main.css">
    </head>
    <body>
      <div class="backcolor">
        <h1>Your shopping cart</h1>

         <div class="tablewrap">
            <table>
              <thead>
                <tr>
                  <th></th>
                  <th  style="width: 50; text-align: left;">ITEM</th>
                  <th>AMOUNT</th>
                  <th>PRICE</th>
                  <th>TOTAL</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td><img src="images/camera1.jpg" alt="" class="table-image"></td>
                  <td><p>Sony Camera</p></td>
                  <td>1</td>
                  <td>70000원</td>
                  <td>70000원</td>
                </tr>
                <tr>
                  <td><img src="images/camera2.jpg" alt="" class="table-image"></td>
                  <td>SONY camera</td>
                  <td>1</td>
                  <td>1979.00</td>
                  <td>1979.00</td>
                </tr>
               <tr>
                  <td colspan="6" style="text-align: right;">70000원</td>
                </tr>

               </tbody>
            </table>
         
            <button class="btn">구매하기</button>
        </div>
      </div>
    </body>
    </html>

    #7800

    codingapple
    키 마스터

    지금 <body> 박스랑 <div class=”backcolor”> 박스랑  <h1>Your shopping cart</h1> 박스랑 상단 모서리가 겹쳐있습니다.

    모서리가 겹치면 마진이 합쳐지거나 이상해집니다. 

    마진을 다 0으로  부여한 것 같지만 실은 h1 태그에도 상단 마진이 기본적으로 부여되어있어서 그렇습니다. 그걸 없애보십시오

    아니면 <div class=”backcolor”>에 padding을 조금이라도 줍시다

    #7820

    이도아
    참가자

    오 h1에 마진탑0 주니까 사라졌습니다! 감사합니다 🙂

    혹시 보더 선은 왜 띄엄띄엄 있는지 알 수 있을까요?

    #7823

    codingapple
    키 마스터

    table을 만들면 원래 그렇습니다 없애주거나 border를 겹치는 속성을 주면 됩니다

9 글 보임 - 1 에서 9 까지 (총 9 중에서)
  • 답변은 로그인 후 가능합니다.

About

현재 월 700명 신규수강중입니다.

  (09:00~20:00) 빠른 상담은 카톡 플러스친구 코딩애플 (링크)
  admin@codingapple.com
  이용약관
ⓒ Codingapple, 강의 예제, 영상 복제 금지
top

© Codingapple, All rights reserved. 슈퍼로켓 에듀케이션 / 서울특별시 강동구 고덕로 19길 30 / 사업자등록번호 : 212-26-14752 온라인 교육학원업 / 통신판매업신고번호 : 제 2017-서울강동-0002 호 / 개인정보관리자 : 박종흠