Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
Tags
- 사피
- 이클립스
- SSAFY
- 줄바꿈
- sysout자동입력
- 자동으로 줄내리기
- sysout
- 7기
- 삼성청년소프트웨어아카데미
- Cannot determine URI for
- 중도퇴소
- 특화프로젝트
- System
- 회고
- Word Wrap
- 취업퇴소
- 구글 로그인 후 js
- http://localhost:8080/js/app/index.js
- 구글 로그인 후 redirect
- 싸피
- 구글 로그인 후 경로
- Java
- /js/app/index.js
- 줄변경
- cannot determine url for
- System.out.println
Archives
- Today
- Total
IT탐험
display속성 block요소와 inline요소의 차이 본문
- display 속성인 block요소와 inline요소에는 세 가지 차이가 있음
- 줄 바꿈 현상 유무
- width와 height 속성 적용 유무
- margin-top, margin-bottom, padding-top, padding-bottom 속성 적용 유무
block | inline | |
줄 바꿈 현상 유무 | O | X |
width와 height 속성 적용 유무 | O | X |
margin-top or bottom, padding-top or bottom 적용 유무 | O | X |
- block 요소와 inline 요소의 종류
- block 요소 - <h1>~<h6>, <p>, <header>, <section>, <main>, <aside>, <footer>, <div>
- inline 요소 - <span>, <a>, <input>
- block 요소를 inline 요소로 변경할 수 있고, 반대의 경우도 가능함
- display : block or inline; 적용
- 줄 바꿈 현상은 일어나지 않지만 width, height, margin, padding 속성을 적용하고 싶을때
- display : inline-block; 적용
'공부내용정리 > CSS' 카테고리의 다른 글
transform, transition, animation (0) | 2021.12.13 |
---|---|
z-index, float, clear (0) | 2021.12.13 |
position 속성으로 HTML 태그에 차원 부여 (0) | 2021.11.28 |
마진 병합 현상 (collapsing margins) (0) | 2021.11.28 |
Comments