인라인블록값

오랫동안 브라우저 폭을 채우고 브라우저를 크기 조정할 때 멋지게 감싸는 상자 그리드를 float속성을 사용하여 만들었습니다.

그러나 display속성의 inline-block값이 이것을 더 쉽게 만듭니다.

인라인 블록 요소는 인라인 요소와 유사하지만 너비와 높이를 가질 수 있습니다.

예

이전 방법 - float 사용 (float속성을 사용한 상자뒤에 요소에 대한 clear속성을 지정해야 합니다.)

.floating-box {
    float: left;
    width: 150px;
    height: 75px;
    margin: 10px;
    border: 3px solid #73AD21; 
}

.after-box {
    clear: left;
}

display속성에 inline-block값을 사용하여 동일한 효과를 얻을 수 있습니다. (clear속성이 필요하지 않습니다.)

.floating-box {
    display: inline-block;
    width: 150px;
    height: 75px;
    margin: 10px;
    border: 3px solid #73AD21; 
}