-
글쓴이글
-
2021년 4월 3일 16:29 #7769
이도아참가자body에 마진0 줘도 계속 위에서 한 칸 떨어져있어요..
패딩을 0 줘보고 html태그에도 마진,패딩0 줘봤는데 똑같아요
이럴 땐 어떡해야할까요?
2021년 4월 3일 18:32 #7775
codingapple키 마스터아마 body 태그 안의 div 박스에 상단 마진이 있을듯요? 그것도 없애보도록 합시다.
박스 두개의 한 변이 겹쳐있으면 margin collapsing 현상이 일어나기 때문입니다
2021년 4월 3일 19:33 #7777
이도아참가자html{
margin-top: 0;
}
body{
margin: 0;
margin-top: 0;
}
body>div{
margin: 0;
margin-top: 0;
}
전부 하나씩 다 줘봤는데도 소용없네요 ㅠ 혹시 vs code 사용해서 그런걸까요... 브라켓으로 바꿔봐야겠네요...ㅠㅠ2021년 4월 3일 21:41 #7779
codingapple키 마스터에디터는 상관없을걸요 혹은 다른 이상한 스타일 준 요소때문에 그럴 수도 있습니다
html css 여기 다 올려주시거나
너무길면 하단 메일이나 카톡으로 파일 보내셔도 됩니다
2021년 4월 4일 15:17 #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;
}2021년 4월 4일 15:18 #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>2021년 4월 4일 15:44 #7800
codingapple키 마스터지금 <body> 박스랑 <div class=”backcolor”> 박스랑 <h1>Your shopping cart</h1> 박스랑 상단 모서리가 겹쳐있습니다.
모서리가 겹치면 마진이 합쳐지거나 이상해집니다.
마진을 다 0으로 부여한 것 같지만 실은 h1 태그에도 상단 마진이 기본적으로 부여되어있어서 그렇습니다. 그걸 없애보십시오
아니면 <div class=”backcolor”>에 padding을 조금이라도 줍시다
-
글쓴이글
- 답변은 로그인 후 가능합니다.