반응형
18. 박스 모델
박스모델은 아래에서 보면 margin-top, margin-left, width, padding-left 등 왠만한 요소들이 모두 박스모델과 관련이 있다.
box.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p, a
border:10px solid red;
padding: 20px;
margin: 40px;
width: 120px;
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti, nostrum!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti, nostrum!
</p>
안녕하세요<a href="http://www.naver.com">네이버</a>입니다.
</body>
</html>
실행화면
a태그는 인라인 방식으로 width와 height 값이 적용되지 않는다. 블록엘리먼트만 적용된다.
출처 : https://opentutorials.org/course/2418/13404
'프로그래밍 > CSS' 카테고리의 다른 글
| 생활코딩 css 정리 - 19. flex (0) | 2017.12.02 |
|---|---|
| 생활코딩 css 정리 - 18．포지션(Position) (0) | 2017.12.01 |
| 생활코딩 css 정리 - 20.마진 겹침 현상 (0) | 2017.11.20 |
| 생활코딩 css 정리 - 19. box-sizing (0) | 2017.11.19 |
| 생활코딩 css 정리 - 14. 레이아웃 인라인 vs 블럭레벨 (0) | 2017.10.15 |
| 생활코딩 css 정리 - 13. bracket 도구사용법 (0) | 2017.10.14 |
| 생활코딩 css 정리 - 12. 캐스캐이딩 (0) | 2017.10.13 |
| 생활코딩 css 정리 - 11. 웹폰트 (0) | 2017.10.13 |