HTML Inline Elements
HTML
Inline elements in HTML are those that do not start with a new line and occupy as much width as their content requires.
Inline Elements
➔ Inline element takes up the space for an element only as much space it require.
➔ Inline element do not create new line unnecessary.
➔ A single line can contain one or more inline elements.
➔ They don't force them to break the line before or after.
Key Characteristics of inline elements.
➔ Inline elements allow other inline elements to sit next to them on the same line.
➔ Inline elements flow within the surrounding content, if they can fit on one line, they don't need new lines.
➔ If the content of the inline elements increases, more horizontal space is required instead of the full width of the parent container.
➔ CSS height and width properties have no effect on inline elements, although padding, margins are respected.
➔ An inline element can achieve block-like behavior with the help of CSS.
Using display: inline-block; Behaves like an inline element but can set CSS width and height.
Using display: block; Behaves like an block element.
Example: Inline Element is converted to inline-block element
Example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta content='charset=utf-8' />
<title>Inline Element is converted to inline-block Example</title>
<style>
.inline {
display: inline-block;
width: 150px;
height: 100px;
color: #fff;
font-size: 30pt;
background-color: #303030;
}
</style>
</head>
<body>
<h1>Inline Element is converted to inline-block Example</h1>
<p>This paragraph contains an <span class='inline'>inline element</span> surrounding other text.</p>
</body>
</html>
Copy the code and click on the "Try it Now" button to see how it works.
Example:Inline Element is converted to block element
Example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta content='charset=utf-8' />
<title>Inline Element is converted to block Example</title>
<style>
.inline {
display: block;
width: 150px;
height: 100px;
color: #fff;
font-size: 30pt;
background-color: #303030;
}
</style>
</head>
<body>
<h1>Inline Element is converted to block Example</h1>
<p>This paragraph contains an <span class='inline'>inline element</span> surrounding other text.</p>
</body>
</html>
Copy the code and click on the "Try it Now" button to see how it works.
Example
<!DOCTYPE html>
<html>
<!-- Example: Inline Elements -->
<head>
<title>Inline Elements Example</title>
<style>
.highlight {
background-color: #ee3;
font-size: 20pt;
color: #fff;
background-color: #303030;
}
b,i {
color: #f00;
}
</style>
</head>
<body>
<h1>Inline Elements Example</h1>
<div><b>Lorem</b> Ipsum is <span class="highlight">inline dummy text </span> of the printing and typesetting
industry.
<i>inline dummy text</i> has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
<p>Note: b, span, i elements are inline elements, and they will not start on a new line and will occupy as much width as needed.</p>
</body>
</html>
Click on the "Try it Now" button to see how it works.
Inline Elements are
<a>,
<abbr>,
<acronym>,
<audio>,
<b>,
<bdi>,
<bdo>,
<big>,
<br>,
<button>,
<canvas>,
<cite>,
<code>,
<data>,
<datalist>,
<del>,
<dfn>,
<em>,
<embed>,
<i>,
<iframe>,
<img>,
<input>,
<ins>,
<kbd>,
<level>,
<map>,
<mark>,
<meter>,
<noscript>,
<object>,
<output>,
<picture>,
<progress>,
<q>,
<ruby>,
<s>,
<samp>,
<script>,
<select>,
<slot>,
<small>,
<span>,
<strong>,
<sub>,
<sup>,
<svg>,
<template>,
<textarea>,
<time>,
<u>,
<var>,
<video>,
<wbr>.