찾다

집 >웹 프론트엔드 >HTML 튜토리얼 >HTML 인라인 블록

HTML 인라인 블록

PHPz
PHPz원래의
2024-09-04 16:18:57590검색

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:

HTML 인라인 블록

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:

HTML 인라인 블록

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:

HTML 인라인 블록

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

css less html Object if for select class var map display margin padding input word
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：HTML 블록 요소다음 기사：HTML 블록 요소

관련 기사

더보기