HTML&CSS/CSS

박스모델(BoxModel)

yunajoe 2022. 12. 20. 19:09

1. 내용(content) : 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분입니다.

2. 패딩(padding) : 내용과 테두리 사이의 간격입니다. 패딩은 눈에 보이지 않습니다.

3. 테두리(border) : 내용와 패딩 주변을 감싸는 테두리입니다.

4. 마진(margin) : 테두리와 이웃하는 요소 사이의 간격입니다. 마진은 눈에 보이지 않습니다.

 

# 패딩(Padding)을 비교해보자!

 

패딩 10일때 

 

 

 

패딩 100일때 

 

 

 

# 마진(margin)을 비교해보자!

 

<style>
/*  위 오른쪽 아래 왼쪽; */
p.p1{
  border: 1px solid blue;
  margin: 50px 60px 40px 200px;
}   

/* 위, 아래, 왼쪽, 오른쪽이 다 같은 경우 */
p.p2{  
    border: 1px solid blue; 
    margin: 50px;     
}


/* 위, 아래가 같고, 왼쪽, 오른쪽이 같은 경우 */
p.p3{
    border: 1px solid blue; 
    margin: 50px 150px;  
}

</style>  
<body>  
    <p class="p1">Lorem ipsum dolor sit amet, usu ea deleniti inimicus conceptam. Sit liber feugait consequuntur in, ea eruditi deseruisse per, in nam malis habemus copiosae. Solum assueverit consequuntur duo eu, et duo nulla pertinacia sadipscing. Est dicunt sententiae cu, meliore tincidunt ex vim. Eum no nibh voluptua deserunt.</p>
    <p class="p2">Lorem ipsum dolor sit amet, usu ea deleniti inimicus conceptam. Sit liber feugait consequuntur in, ea eruditi deseruisse per, in nam malis habemus copiosae. Solum assueverit consequuntur duo eu, et duo nulla pertinacia sadipscing. Est dicunt sententiae cu, meliore tincidunt ex vim. Eum no nibh voluptua deserunt.</p>
    <p class="p3">Lorem ipsum dolor sit amet, usu ea deleniti inimicus conceptam. Sit liber feugait consequuntur in, ea eruditi deseruisse per, in nam malis habemus copiosae. Solum assueverit consequuntur duo eu, et duo nulla pertinacia sadipscing. Est dicunt sententiae cu, meliore tincidunt ex vim. Eum no nibh voluptua deserunt.</p>
    
</body>
</html>