Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to Divide a Horizontal Line into Multiple Parts?
In HTML, the <hr> tag stands for horizontal rule and is most commonly displayed as a horizontal line used to separate content (or define a change) in an HTML page. The <hr> tag is an empty tag that does not need to be followed by a closing tag. Following is the syntax of this tag –
<hr> ...
It supports the following attributes:
align: It determines the rule's alignment (left/ centre/ right) on the page. The default value(left) is used if no value is specified.
color: It sets the rule's colour using a colour name or hexadecimal value.
noshade: It sets the rule to have no shading.
size: It sets the height of the rule, in pixels.
width: It sets the width of the rule in pixels or percentage.
Example
The example below shows the default behavior of the <hr> tag.
<!DOCTYPE html>
<html>
<title>An example of horizontal rule</title>
<body>
<h3>It is a beautiful day</h3>
<hr>
There is a horizontal rule above this line.
</body>
</html>
We can, however, divide the horizontal line into multiple parts by using certain CSS properties as discussed below.
The CSS Property Display
The ‘display’ CSS property determines whether an element is treated as a block or inline element, as well as the layout used for its children, which can be flow layout, grid, or flex. Formally, the display property specifies the inner and outer display types of an element.
The outer type determines an element's participation in flow layout; the inner type determines child layout.
display: value;
Some of the important values include: inline, block, contents, flex, grid, inline-block etc.
inline: The element creates one or more inline element boxes with no line breaks before or after them. If there is space, the next element will be on the same line in normal flow.
block: When in normal flow, the element generates a block element box, generating line breaks both before and after the element.
contents: The container is removed, and the child elements of the element at the next level up in the DOM are replaced.
flex: The element behaves as a block element and arranges its content using the flexbox model.
grid: The element behaves as a block element and arranges its content using the grid model.
inline-block: The element creates a block element box that flows with the surrounding content as if it were a single inline box (behaving much like a replaced element would).
Using Dashed Value of border-top Property
The ‘border-top’ shorthand property concatenates all top border properties into a single declaration. The following properties must be set in the following order:
border-top-width
border-top-style (required) (required)
border-top-color
If border-top-color is not specified, the color used will be the text color.
Syntax
border-top: border-width border-style border-color
Where,
border-width: It sets the width of the top border of an element.
border-style: It sets the style (dotted/dashed/solid/hidden…) for the element’s top border.
border-style: It sets the style (dotted/dashed/solid/hidden…) for the element’s top border.
Example
This example makes use of the border-top property on the <hr> element with its "dashed" value and divides a horizontal line into multiple parts.
<!DOCTYPE html>
<html>
<head>
<title>How to Divide a Horizontal Line into Multiple Parts?</title>
<style>
hr {
border-top: 4px dashed thistle;
}
p{
background-color:lavenderblush;
padding:5px 4px 4px 10px;
color:rebeccapurple;
font-size:18px;
border:1px solid purple;
}
</style>
</head>
<body>
<hr>
<h2>A Life Lesson</h2>
<hr>
<p>
The unhappiest people are often those who care the most about what everyone else thinks. There is great freedom in leaving others to their opinions. And there is a huge weight lifted when you take nothing personally.
</p>
</body>
</html>
Using Multiple <hr> Tags with Different Widths
In this example we use multiple <hr> elements, with the display set to "inline-block" and the border-top set to "solid." Then we set the desired width of each horizontal line.
Example
<!DOCTYPE html>
<html>
<head>
<title>How to Divide a Horizontal Line into Multiple Parts?</title>
<style>
.inlineHR {
display: inline-block;
border-top: 4px solid mediumvioletred;
}
.hr1 {
width: 70px;
}
.hr2 {
width: 60px;
margin-left: 10px;
}
.hr3 {
width: 50px;
margin-left: 10px;
}
.hr4 {
width: 40px;
margin-left: 10px;
}
.hr5 {
width: 30px;
margin-left: 10px;
}
p{
text-align:justify;
background-color:seashell;
}
</style>
</head>
<body>
<h2>CSS display property</h2>
<hr class='inlineHR hr1' />
<hr class='inlineHR hr2' />
<hr class='inlineHR hr3' />
<hr class='inlineHR hr4' />
<hr class='inlineHR hr5' />
<p>
The display CSS property determines whether an element is treated as a block or inline element, as well as the layout used for its children, which can be flow layout, grid, or flex. Formally, the display property specifies the inner and outer display types of an element. The outer type determines an element's participation in flow layout; the inner type determines child layout.
</p>
</body>
</html>
111 Views
