프로그래밍/CSS

생활코딩 css 정리 - 18. 박스 모델

가카리 2017. 11. 15. 22:55
반응형
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


반응형