Maison >interface Web >tutoriel HTML >Bloc HTML en ligne
HTML has another type of element called Inline Block Elements. It is only the space occupied and bounded by each and every tag called by defined elements instead of breaking the HTML contents flow. The block-level elements feature mainly we consider as
The basic syntax is followed below:
Syntax:
<html> <body> <p><span> ---some html codes ---</span> </p> </body> </html>
The above codes are basic syntax for writing the inline-block elements in html. We have used some sets of pre-defined inline-block elements below.
The above tags are pre-defined html inline elements based on the user requirements in the html mainly; we will focus on tag in html inline-block elements. We all know block-level elements always start a new line and take up with full width for given variables, but inline elements do not start a new line. Also, it takes less width when compared to block-level elements, but it has necessary to declare width in the html inline elements. The inline elements will be declared on the inside of the paragraph elements. The element is often used in the container as some text and has no specific required attributes, but the given css style, class, and ids are common when the element is used together with css in some style parts of the text.
Code:
<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>
Explanation of the above code: In the above codes, we have set the width for two div tags; each will be 50%, and the display attributes will be inline-block. The expected output will vary because the two div tags’ width is 50%, so will change any of the tag values should be 51% or 49%. Still, it is not a good practice and also not enough for the HTML element space; it needs at least 50% because inline elements respect with word spacing between the two div tags in HTML.
We can also use some borders and padding styles in the HTML div tags; it will highlight the web pages more effectively. We use
We will discuss the below examples.
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:
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:
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.
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.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!