Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Create Text Inside a Box Using HTML and CSS
To create a text inside a box using HTML and CSS, we will be understanding most commonly used approaches in this article.
We are having a <h1> element, inside that element we will have <p> element. We need to to place some charecter of the p element inside a box, or create a border surrounded those charecters.
Approaches to Create a Text Inside a Box
Creating a Text inside a Box Using span Element
To create a text inside a box using HTML and CSS, we have used h1 element with CSS. The h1 element acts as a container for it's child element(span).
- We have used class selector on span which selects the contents of span element which is responsible for styling.
- We have used "border: 5px solid black;" which inserts a solid border of 5px.
Example
Here is an example implementing above mentioned steps to create a text inside a box.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.textbox {
width: 110px;
height: 32px;
padding: 10px -10px 10px 10px;
border: 5px solid black;
margin: 0;
}
</style>
</head>
<body>
<h3>
Create text inside box using HTML and CSS
</h3>
<p>
In this example we have used
CSS padding and border property.
</p>
<h1>
<span class="textbox">Tutorials</span>Point
</h1>
</body>
</html>
Creating a Text inside a Box Using CSS Flexbox
To create a text inside a box using HTML and CSS, we have used CSS flexbox.
- We have used "display: flex;" and used "justify-content: center;" to create a adjusted flexbox content, which is responsible for the flexible and convenient alignment of content inside the h1 element.
- The 'textbox1' and 'textbox2' class inherits the flexbox properties to place it's content inside a box in the center of the document.
Example
Here is an example of implementing above mentioned steps to create a text inside box.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.header {
display: flex;
}
.textbox1,
.textbox2 {
display: flex;
flex-direction: column;
justify-content: center;
}
.textbox1 {
border: 5px solid black;
padding: -5px;
}
.textbox2 {
padding: -5px;
}
</style>
</head>
<body>
<h3>
Create text inside box using HTML and CSS
</h3>
<p>
In this example we have used CSS Flebox Property
</p>
<h1 class="header">
<span class="textbox1">Tutorials</span>
<span class="textbox2">Point</span>
</h1>
</body>
</html>
Conclusion
In this article, we have understood how to create a text inside a box using HTML and CSS. We have discussed two most commonly used approaches, using div with CSS and using CSS flexbox. We can use any of the above mentioned approach, but generally flexbox is preferred because of it's simplicity and easy alignment inside container.
24K+ Views
