인라인 수준 요소에는 CSS 표시 속성이 'inline, 'inline-table' 또는 'inline-block'으로 설정되어 있으며 이러한 요소는 위아래로 줄 바꿈을 강제하지 않습니다. 인라인 수준 상자는 위치 지정 체계의 일부이자 자식 상자를 포함하는 각 인라인 수준 요소에 의해 생성됩니다.
인라인 상자는 내용이 인라인 형식 컨텍스트를 따르는 상자입니다. 인라인 상자는 여러 인라인 상자로 분할되는 반면 분할되지 않는 인라인 상자는 원자성 인라인 수준 상자라고 합니다.
익명 인라인 상자는 개발자가 제어할 수 없는 상자입니다. 블록 상자에 일부 베어 텍스트와 기타 인라인 수준 상자가 포함된 경우 인라인 수준 상자 주변의 베어 텍스트는 인라인 서식 컨텍스트를 따르고 익명 인라인 상자로 묶입니다.
예시
인라인 수준 요소 및 인라인 상자에 대한 예를 살펴보겠습니다. −
<!DOCTYPE html>
<html>
<head>
<title>CSS Inline-level Elements and Inline Boxes</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
}
input[type="button"] {
border-radius: 10px;
}
.child{
color: white;
border: 4px solid black;
}
.child:nth-of-type(1){
background-color: #FF8A00;
}
.child:nth-of-type(2){
background-color: #F44336;
}
.child:nth-of-type(3){
background-color: #C303C3;
}
.child:nth-of-type(4){
background-color: #4CAF50;
}
.child:nth-of-type(5){
background-color: #03A9F4;
}
.child:nth-of-type(6){
background-color: #FEDC11;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS Inline-level Elements and Inline Boxes</legend>
<div><span class="child">Orange</span> Color<span class="child">Red</span> Color<span class="child">Violet</span> Color</div><br>
</body>
</html> 출력
이것은 다음과 같은 출력을 생성합니다 -
