Run-In Elements
The run-in value creates a box whose type depends on the surrounding elements.
If a run-in element contains an block-level element, then the run-in element becomes a block-level element. If the next sibling is a block element, then the run-in element becomes the first inline-level element in the sibling. Otherwise the run-in element is treated as a block-level element.
The following shows a run-in element with a block-level sibling:
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
p {
display: block;
}
span {
display: run-in;
border: medium double black;
}
</style>
</head>
<body>
<span>
HyperText Markup Language (HTML) is the main markup language for
displaying web pages and other information that can be displayed
in a web browser(From From Wikipedia, the free encyclopedia).
</span>
<p>
HyperText Markup Language (HTML) is the main markup language for
displaying web pages and other information that can be displayed
in a web browser(From From Wikipedia, the free encyclopedia).
</p>
</body>
</html>
The following code shows a run-in element with an inline sibling:
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
p {
display: inline;
}
span {
display: run-in;
border: medium double black;
}
</style>
</head>
<body>
<span>
HyperText Markup Language (HTML) is the main markup language for
displaying web pages and other information that can be displayed
in a web browser(From From Wikipedia, the free encyclopedia).
</span>
<p>
HyperText Markup Language (HTML) is the main markup language for
displaying web pages and other information that can be displayed
in a web browser(From From Wikipedia, the free encyclopedia).
</p>
</body>
</html>