이 포스팅은 PC로 작성되었습니다.
모바일로 보시는 분들에게는 가끔
줄 바꿈이 어색하게 보일 수 있습니다.
지난 포스트
CSS 박스 사이징
이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS 박스 모델 (padding, margin) 이 포스팅은 PC로 작성되었습니다. 모바일
gogogameboy.tistory.com
마진 margin이 겹치는 현상
위의 소스 코드는 PC에서 드래그 후,
ctrl+x로 잘라내서 다른 곳으로 붙여넣기가 가능합니다.
ctrl+c(복사)는 불가능합니다.
위의 소스 코드는 PC에서 드래그 후,
ctrl+x로 잘라내서 다른 곳으로 붙여넣기가 가능합니다.
ctrl+c(복사)는 불가능합니다.
영상으로 보시는 바와 같이 마진이 겹치는 현상이 있습니다.
그런데 이것은 오류가 아니라 오히려 겹치는 쪽이 웹페이지의 디자인을 하는데에 있어서 유리하지 않을까 하는 느낌이 듭니다.
위의 소스 코드는 PC에서 드래그 후,
ctrl+x로 잘라내서 다른 곳으로 붙여넣기가 가능합니다.
ctrl+c(복사)는 불가능합니다.
부모 엘리먼트가 시각적인 효과가 없는 투명한 상태일 때, 부모 엘리먼트의 마진 값과 자식 엘리먼트의 마진 값 중에서 큰 쪽의 마진 값이 자식 엘리먼트의 마진 값으로 사용이 됩니다.
위의 소스 코드는 PC에서 드래그 후,
ctrl+x로 잘라내서 다른 곳으로 붙여넣기가 가능합니다.
ctrl+c(복사)는 불가능합니다.
시각적인 효과가 없는 태그의 마진 값은 위쪽의 마진 값과 아래쪽의 마진 값 중에서 더 큰 값이 그 태그의 마진 값이 됩니다.
다음 포스트
CSS 포지션 static과 relative
이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS 마진 겹침 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들
gogogameboy.tistory.com
이 글이 도움이 됐다면 하단의 ♡ 공감 버튼을 꾹 눌러서
빨간 하트♥로 만들어주세요.
(비로그인도 가능합니다!!)
지인에게 보여주고 싶은 글이었다면
공감 버튼 옆을 클릭해서 SNS에 공유해주세요.
댓글은 블로그 운영에 큰 힘이 됩니다.
'front-end > css' 카테고리의 다른 글
| CSS 포지션 absolute (0) | 2021.01.02 |
|---|---|
| CSS 포지션 static과 relative (0) | 2021.01.02 |
| CSS 박스 사이징 (0) | 2021.01.01 |
| CSS 박스 모델 (padding, margin) (0) | 2021.01.01 |
| CSS, inline과 block (0) | 2020.12.31 |
댓글