HTML 인라인 요소와 HTML 블록 수준 요소의 개요 및 차이점_HTML/Xhtml_웹페이지 제작

블록 수준 요소(블록) 특성 :
•항상 별도의 줄을 차지합니다. 즉, 새 줄에서 시작하고 후속 요소도 새 줄에 표시해야 합니다.
•너비; (너비), 높이, 패딩 및 여백을 모두 제어할 수 있습니다.

인라인 요소(인라인) 속성 :
• 인접한 인라인 요소는 같은 줄에 있습니다. • 너비, 높이, 패딩 상단/하단(padding-top/padding-bottom) 및 여백 상단/하단(margin-top/margin -bottom)은 변경할 수 없습니다. 즉, 내부의 텍스트나 그림의 크기는 변경할 수 없습니다.


주요 블록 수준 요소는 :

코드 복사 코드는 다음과 같습니다:

address, blockquote, center, dir, div, dl, fieldset, form, h1, h2, h3, h4, h5, h6, hr, isindex, menu, noframes, noscript, ol, p, pre, table, ul

주요 인라인 요소는 입니다:

코드 복사코드는 다음과 같습니다.

a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em ,font , i , img , input , kbd , label , q , s , samp , select , small ,span , Strike , Strong , sub , sup ,
textarea , tt , u , var

변경 가능한 요소(요소가 블록인지 인라인 요소인지는 컨텍스트에 따라 결정됨) :

코드 복사 코드는 다음과 같습니다.

applet, 버튼, del, iframe, ins, map, object, script

미디엄 블록의 CSS 적용 -level, inline elements : CSS를 사용하면 위 표의 HTML 태그 분류 제한을 없애고 다양한 태그/요소에 필요한 속성을 자유롭게 적용할 수 있습니다.


사용되는 주요 CSS 스타일은 다음 세 가지입니다: •display:block - 블록 수준 요소로 표시
•display:inline - 인라인 요소로 표시
•dipslay:inline-block -- 인라인 블록 요소로 표시되고 병렬로 표시되며 너비, 높이, 내부 및 외부 여백과 같은 속성을 수정할 수 있습니다.

요소 스타일, 원래 수직 목록이 수평으로 표시될 수 있습니다.


주제에서 벗어남: 저는 최근에 블록 수준 요소와 인라인 요소의 차이점에 대한 관련 지식을 정리했습니다. 인터넷에서 관련 기사를 많이 찾아보니 모두가 이해하고 있는 것 같았습니다. 제가 직접 테스트해본 결과 많은 문제점을 발견했습니다: 1. 인라인 요소의 margin-left / margin-right 및 padding-left / padding-rightt 는 다음과 같습니다. 제어되므로 전달할 수 있습니다. 이 4가지 속성은 인라인 요소의 너비를 제어합니다.
2. 블록 수준 요소 태그는 인라인 요소 내부에도 배치할 수 있으며 내부 블록 수준 요소 태그는 외부 인라인 태그를 확장하므로 블록 요소를 배치하여 인라인 요소의 높이를 제어할 수 있습니다(온라인 소개 유일한 점은 인라인 요소에는 텍스트와 기타 인라인 요소만 포함될 수 있다는 것입니다.)
예:



코드 복사 코드는 다음과 같습니다.


Test