inline block 차이
인라인은 줄바꿈 없음
블럭 혼자서 해당 라인을 모두 씀
display iline 또는 block 속성을 주어 바꿀 수 있음.
box model
inline 에서는 width와 height 값을 무시함.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<style>
p, a {
border: 10px solid powderblue;
padding: 30px;
margin: 50px;
width: 500px;
height: 100px;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Facere distinctio reiciendis culpa deleniti totam non maiores at amet ipsum.
Quidem consequatur eos quod ratione autem ipsum beatae sint nobis! Qui!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Aliquam consectetur illo blanditiis maiores aliquid accusantium, similique corrupti, est earum nulla quis,
architecto doloremque perspiciatis ea. Sequi asperiores eum quisquam alias!</p>
이제 인라인 속성을 가진 a태그를 확인 하겠습니다. <a href="">a 태그</a>인라인은 width와 height값이 무시됩니다.
<script src="script.js"></script>
</body>
</html>
box-sizing: boder-box; 를 지정하면 보더 값에 따라 원치 않게 변하는 컨텐츠 크기를 제어할 수 있음.
마진 겹침 현상
이것이 없다면 두 컨텐츠 사이의 간격이 두배가 될 것이다.
하지만 이 마진 겹침 현상으로 불편함도 있음.
마진 겹침 현상이 발생 했을 때 큰쪽을 사용한다.
- 리스트나 동일 레벨의 컨텐츠 사이의 마진 겹침 현상
- 부모에 시각적인 효과를 모두 빼버리면 부모와 자식 컨텐츠 간에 마진 겹침 현상이 발생한다.
또한 컨텐츠에 시각적인 효과가 없다면 위쪽과 아래쪽 마진 중 큰값만 반영된다.
'FrontEnd > CSS' 카테고리의 다른 글
| Position (0) | 2025.12.06 |
|---|---|
| 개념정리 크기 단위 (ps, %, em, vm) (0) | 2025.12.01 |
| 개념정리 SELECTOR(선택자) (0) | 2025.12.01 |
| 레이아웃 Flex와 Grid (0) | 2025.11.27 |