html spacer line – How To Make Horizontal Lines HR In HTML & CSS ‍?

html spacer line or horizontal line html – The HTML hr tag defines a thematic break in an HTML page (e.g. a shift of topic). Like as a hr tag horizontal line and html horizontal lint.

html spacer line

The spacer element is used to insert spaces on the web page. Html queries related to “html spacer line”.

horizontal line html or html spacer line

<!-- code -->

<hr>

<!-- code -->

Use the hr tag to define thematic changes in the content:

index.html

<!DOCTYPE html>
<html>
<body>

<h2>Free Donwload Source code with demo and Example</h2>

<p>Pakainfo website focuses on all web language and framework tutorial PHP, Laravel, Codeigniter, Nodejs, API, MySQL, AJAX, jQuery, JavaScript, Demo.</p>

<hr>

<p>Pakainfo.com helps build websites using PHP, specializes in building eCommerce shopping cart and provides PHP freelancer for hire.</p>

<hr>

<p>Learn Web Development, PHP, MySQL, JavaScript, jQuery, Ajax, WordPress, Drupal, CodeIgniter, CakePHP with Pakainfo tutorials. View live demo and download...</p>

</body>
</html>

HTML hr Tag

Attribute Value Description
Align left center right Used to specify the alignment of the horizontal rule.
noshade noshade Used to specify the bar without shading effect.
size pixels Used to specify the height of the horizontal rule.
width pixels Used to specify the width of the horizontal rule.
Read Also:  HTML Textbox CSS style examples

HTML Horizontal Line Color, Size and Other Styles with CSS

hr { display: block; margin-before: 0.5em; margin-after: 0.5em; margin-start: auto; margin-end: auto; overflow: hidden; border-style: inset; border-width: 1px;}

hr {width: 60%;margin-left: auto;margin-right: auto;}

hr {width: 300px;margin-left: auto;margin-right: auto;height: 100px;background-color:#666;opcaity: 0.5;}

hr {width: 80%;height: 8px;margin-left: auto;margin-right: auto;background-color:#666;border: 0 none;margin-top: 100px;margin-bottom:100px;}

 .five-star-line { height: 20px; background-image: url(img/5-star-rating.png); background-repeat: repeat-x; background-position: center; background-color: transparent; border: none; width: 50%; margin: auto; margin-top: 5%; margin-bottom: 5%; }

Having Fun Applying Styles to Horizontal Lines

 .striped-border { border: 1px dashed #000; width: 50%; margin: auto; margin-top: 5%; margin-bottom: 5%; }
.zig-zag { border: none; width: 50%; margin: auto; margin-top: 5%; margin-bottom: 5%; height: 40px; background: linear-gradient(135deg, #ECEDDC 25%, transparent 25%) -20px 0, linear-gradient(225deg, #ECEDDC 25%, transparent 25%) -20px 0, linear-gradient(315deg, #ECEDDC 25%, transparent 25%), linear-gradient(45deg, #ECEDDC 25%, transparent 25%); background-size: 40px 40px; background-color: #EC173A;}

How to create extra space in HTML or a web page?

extra    space

Keep spacing in text that is pasted into a page

<pre class="tab">Welcome    To      Paka    info of     spaces</pre>

I hope you get an idea about html spacer line.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.