-
CSS margin, padding, border, positionfront-end/HTMI CSS 2023. 6. 7. 12:03728x90
1. margin
테두리를 기준으로 바깥쪽 여백
- margin-top : 10px > 위쪽만 10px
- margin-botton : 10px > 아래쪽만 10px
- margin-top,bottom,left,right
<body> <div id ="box">내용</div> </body><style> #box { width: 100px; height: 100px; background-color: mediumaquamarine; border: 3px solid black; margin-top: 100px; } </style>
- body를 0px로 변경할 경우
body{ margin: 0px; }
웹 페이지에 여백 없이 나온다.
* margin 겹침 현상
형제 관계인 요소의 margin 값이 중첩되면, 더 큰 값을 가진 margin영역으로 병합 되는 현상
2. padding
테두리 기준으로 요소의 안쪽 여백을 지정하는 속성
테두리와 내용(content) 사이의 여백
크기가 커진 것처럼 보인다.
<style> div{ width: 200px; height: 200px; background-color: lavender; } </style>
<style> div{ width: 200px; height: 200px; background-color: lavender; padding: 50px; } </style>
3. border
border - radius : 테두리 모서리 궁들게 만드는 속성
div{ width: 100px; height: 100px; background-color: gray; border: 10px solid purple; border-radius : 50%; }
- 특정 테두리만 변경
top
lefttop
rightbottom
leftbottom
rightborder-top-right-radius: 50%; border-bottom-left-radius: 50%;
4. Position
자유자재로 요소의 위치를 배치하는 속성
static 태그가 위에서 아래대로 순서대로 배치(기본값) relative 초기 위치 상태에서 상하좌우로 위치 이동 absolute 절대 위치 좌표를 설정 fixed 화면을 기준으로 절대 위치 좌표 설정 728x90'front-end > HTMI CSS' 카테고리의 다른 글
CSS selector 활용, 링크 클릭 보라색 흔적 없애기 (0) 2023.06.18 CSS 박스 만들기, float, inline-block (0) 2023.06.18 CSS 공간분할태그, 가시속성 (0) 2023.06.07 CSS 크기 단위, 디스플레이, selector (0) 2023.06.07 CSS 기본 구조 및 선택자 (0) 2023.06.05