라벨이 padding인 게시물 표시

CSS margin, padding 차이점 및 HTML 태그 간격 및 여백, 정렬 등 크기 조절 사용법

이미지
margin 속성 사용법 magin 속성은 HTML 요소의 맨 마지막 단계의 여백으로 콘텐츠와 콘텐츠 간의 간격을 의미합니다.  margin 속성을 이용해 HTML 태그 간의 간격 및 여백을 지정할 수 있으며 HTML 문서 디스플레이 구성에 중요한 역할을 하는 속성입니다. margin 속성값 속성값 설명 크기(px, em) 직접적으로 margin 속성의 크기를 px 및 em 단위로 입력해서 지정 백분율 퍼센트 값을 지정할 경우 자기 자신의 부모요소의 크기를 기준으로 크기가 지정되게 됩니다. auto display 속성 값에 따라 적절한 크기로 자동 지정됩니다. HTML 문서 가독성을 위한 전체 페이지 가운데 정렬 시키기 HTML 문서는 기본적으로 좌측 정렬이 됩니다. 요즘에는 HTML 문서의 가독성을 위해 가운데 정렬하는 경우가 많은데요. 이때 margin 속성을 사용해 HTML 문서 전체의 가운데 정렬할 수 있습니다.  아래의 예제에서는 전체 문서의 위, 아랫부분의 여백을 15px 간격을 띄우고, 가운데 정렬 시킬 수 있습니다. body 태그 하위에 전체 문서의 최상위 시맨틱 태그 or div 태그 선언 선언된 최상위 태그의 너비(width)를 지정. margin 속성값의 좌우에 해당하는 값을 auto로 지정. < style >             main     {         width : 768px ;         margin : 15px auto ;         background-color : # 32877b ;         color : white ;     } </ style > </ head > < body > < main >     < h1 > margin 속성 이용 HTML 문서 전체 가운데 정렬 예제 </ h1 >     < p > Lorem ipsum dolor sit amet, consectetur adipisicing eli