HTML 인라인 블록
HTML에는 인라인 블록 요소라는 또 다른 유형의 요소가 있습니다. HTML 콘텐츠의 흐름을 깨지 않고 정의된 요소에 의해 호출되는 각각의 태그가 차지하고 경계를 이루는 공간일 뿐입니다. 블록 수준 요소 기능은 주로
HTML 인라인 블록 구문
기본 구문은 다음과 같습니다.
구문:
<html> <body> <p><span> ---some html codes ---</span> </p> </body> </html>
위 코드는 HTML에서 인라인 블록 요소를 작성하기 위한 기본 구문입니다. 아래에서는 사전 정의된 인라인 블록 요소의 일부 세트를 사용했습니다.
위 태그는 주로 html의 사용자 요구 사항을 기반으로 사전 정의된 html 인라인 요소입니다. 우리는 html 인라인 블록 요소의 태그. 우리 모두는 블록 수준 요소가 항상 새 줄을 시작하고 주어진 변수에 대해 전체 너비를 차지한다는 것을 알고 있지만 인라인 요소는 새 줄을 시작하지 않습니다. 또한 블록 수준 요소에 비해 너비가 적게 소요되지만 html 인라인 요소에서는 너비를 선언해야 합니다. 인라인 요소는 단락 요소 내부에 선언됩니다. <스팬> 요소는 종종 컨테이너에서 일부 텍스트로 사용되며 특정 필수 속성이 없지만 지정된 CSS 스타일, 클래스 및 ID는 요소는 텍스트의 일부 스타일 부분에서 CSS와 함께 사용됩니다.
HTML 인라인 블록을 만드는 방법은 무엇입니까?
- 이전 기사에서 설명한 것처럼 블록 수준 요소에 HTML 인라인 블록 요소를 만들었습니다. HTML 요소는 사용자가 주어진 필수 공간을 할당하도록 하고 HTML 태그의 동일한 줄에 서로 옆에 나타납니다. HTML 요소의 높이와 너비를 제어할 수 없습니다. 인라인 요소의 속성입니다.
- display: inline이라는 CSS 스타일 속성은 필요할 때 패딩 및 여백 설정을 무시합니다. HTML에서 패딩 및 여백 값을 허용합니다. 인라인 요소만 포함하며, display: inline과 같은 설정을 사용하여 블록 요소를 한 줄에 표시합니다. HTML 코드를 최소화하지 않으려면 CSS 스타일을 사용하여 div 태그를 50% 너비로 설정할 수 있습니다. 이는 인라인 블록 요소를 위한 CSS 솔루션입니다.
- 때때로 공백을 사용할 수 있습니다. no-wrap은 상위 컨테이너입니다. 그러면 div를 서로 연결하지 않고 예상대로 각 div 인라인 블록에 표시하는 태그를 중첩된 div 태그라고도 합니다. 우리는 CSS 스타일의 도움으로 레이아웃을 만드는 데 사용될 몇 가지 인라인 블록 요소에 대해 논의했습니다.
- CSS 스타일의 인라인 블록 요소 설정으로 표시된 HTML에 두 개의 divs 태그를 사용한다고 가정해 보겠습니다. 각 태그의 너비를 50%로 설정할 수 있지만 두 번째 div 태그가 첫 번째 div 태그 아래에 위치합니다.
코드:
<html> <head> section { background: green; box-sizing: border-box; padding: 150px; } div { box-sizing: border-box; display: inline-block; height: 100px; padding: 54px; text-align: center; width: 53%; } .green { background: lightgreen; } .black { background: black; } </head> <body> <span style="border: 2px lightgreen"> </span> <section> <div class="green">Width: 40%</div> <div class="black">Width: 60%</div> </section> </body> </html>로그인 후 복사위 코드 설명: 위 코드에서는 두 개의 div 태그에 대한 너비를 설정했습니다. 각각은 50%가 되며 표시 속성은 인라인 블록이 됩니다. 두 div 태그의 너비가 50%이므로 예상되는 출력은 다양하므로 태그 값은 51% 또는 49%로 변경됩니다. 그러나 이는 좋은 습관이 아니며 HTML 요소 공간에 충분하지도 않습니다. 인라인 요소는 HTML의 두 div 태그 사이의 단어 간격을 따르기 때문에 최소한 50%가 필요합니다.
We can also use some borders and padding styles in the HTML div tags; it will highlight the web pages more effectively. We use
tag called block-level elements for the above codes. We use the tag as the inline element tag; we will use some contents inside the tags that will be required on the web page. Examples to Implement in Inline-Block
We will discuss the below examples.
Example #1
Code:
<html> <body> <p>Sample <span style="border:3px green">Welcome</span>To my domain</p> <p>Welcome to My Domain</p> </body> </html>
로그인 후 복사Output:
Example #2
Code:
<html> <head> <style> span.first { display: inline; width: 150px; height: 120px; padding: 8px; border: 3px blue; background-color: green; } span.second { display: inline-block; width: 140px; height: 110px; padding: 7px; border: 3px blue; background-color: green; } span.third { display: block; width: 103px; height: 110px; padding: 6px; border: 2px yellow; background-color: black; } </style> </head> <body> <div> Welcome to My Domain <span class="first">Welcome</span> <div> <div> Same Same <span class="second">Same Same</span> <div> <div> Welcome to My Domain <span class="third">Welcome</span> <div> </body> </html>로그인 후 복사Output:
Example #3
Code:
<html> <head> <style> .first { float:center; display: inline; width: 150px; height: 120px; padding: 8px; border: 3px blue; background-color: green; } .1{ clear:center; } </style> </head> <body> <div class="first"> <marquee> Welcome to My Domain</marquee> </div> </body> </html>로그인 후 복사Output:
Explanation of the above code: The first example will discuss the essential inline element called tag that will use for the web page; the second example will use span in the CSS style, and the same will be called in the tag in body sections each of the CSS styles will be defined in each span third example we will use some text values in the box-limit areas in the inline-block element features.
Conclusion
In Conclusion, partly based on the above topics, we have some ideas about inline-block elements in Html. We use both tag elements for their dependencies and features in user areas. However, IE and other browser versions may or may not support some tags.
위 내용은 HTML 인라인 블록의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
HTML의 테이블 테두리
Sep 04, 2024 pm 04:49 PM
HTML의 테이블 테두리 안내. 여기에서는 HTML의 테이블 테두리 예제를 사용하여 테이블 테두리를 정의하는 여러 가지 방법을 논의합니다.
HTML의 중첩 테이블
Sep 04, 2024 pm 04:49 PM
HTML의 Nested Table에 대한 안내입니다. 여기에서는 각 예와 함께 테이블 내에 테이블을 만드는 방법을 설명합니다.
HTML 여백-왼쪽
Sep 04, 2024 pm 04:48 PM
HTML 여백-왼쪽 안내. 여기에서는 HTML margin-left에 대한 간략한 개요와 코드 구현과 함께 예제를 논의합니다.
HTML 테이블 레이아웃
Sep 04, 2024 pm 04:54 PM
HTML 테이블 레이아웃 안내. 여기에서는 HTML 테이블 레이아웃의 값에 대해 예제 및 출력 n 세부 사항과 함께 논의합니다.
HTML 입력 자리 표시자
Sep 04, 2024 pm 04:54 PM
HTML 입력 자리 표시자 안내. 여기서는 코드 및 출력과 함께 HTML 입력 자리 표시자의 예를 논의합니다.
PHP에서 HTML/XML을 어떻게 구문 분석하고 처리합니까?
Feb 07, 2025 am 11:57 AM
이 튜토리얼은 PHP를 사용하여 XML 문서를 효율적으로 처리하는 방법을 보여줍니다. XML (Extensible Markup Language)은 인간의 가독성과 기계 구문 분석을 위해 설계된 다목적 텍스트 기반 마크 업 언어입니다. 일반적으로 데이터 저장 AN에 사용됩니다
HTML 정렬 목록
Sep 04, 2024 pm 04:43 PM
HTML 순서 목록에 대한 안내입니다. 여기서는 HTML Ordered 목록 및 유형에 대한 소개와 각각의 예에 대해서도 설명합니다.
HTML 온클릭 버튼
Sep 04, 2024 pm 04:49 PM
HTML onclick 버튼에 대한 안내입니다. 여기에서는 각각의 소개, 작업, 예제 및 다양한 이벤트의 onclick 이벤트에 대해 설명합니다.
