width요소(outerWidth & innerWidth & width)

김해김씨가오리·2022년 12월 6일
0

PUBLISHING

목록 보기
8/8

※여러줄 주석 처리
주석 구역 드래그 후, Alt + Shift + A

outerWidth & innerWidth & width

<style>
   .box{
    width: 300px;
    height: 300px;
    border: 10px solid green;
    padding: 50px;
    margin: 50px;
   }
</style>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script>
    $(document).ready(function(){
        console.log($(".box").width());
        console.log($(".box").innerWidth());
        console.log($(".box").outerWidth());
        console.log($(".box").outerWidth(true));
       
    });
</script>
</head>
<body>
    <div class="box">     
    </div>
</body>

outerWidth

요소의 순수 너비 + padding + border
= 300px + 100px + 20px = 420px

outerWidth(true)

outerWidth + margin
= 420px + 100px = 520px

innerWidth

요소의 순수 너비 + padding
= 300px + 100px = 400px

width

요소의 순수 너비
= 300px

profile
그냥 기록용!!!

0개의 댓글