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 avoid a new line with a tag?
While using a tag, the browser often places the items within the container in the next line. For example, programmers need to place the headers in a single line to create the navigation component. We can use the inline, inline-block, flex-box properties, etc., to avoid new lines with the tag.
This article will explain how to avoid a new line with a tag by following approaches like inline property, flex-box property, etc.
Use inline Property
One popular method to avoid new lines with tags is to use the inline property. This property forces the new lines to stay the same as the previous line.
Example
<!DOCTYPE html>
<html lang="en">
<style>
.first-container{
display: inline;
padding:2px;
padding:10px;
border: 2px solid orange;
}
.second-container{
display: inline;
padding: 10px;
border: 2px solid purple;
}
body{
padding:2vw;
}
</style>
<body>
<div class="first-container">
This is the first paragraph.
</div>
<div class="second-container">
This is the second paragraph.
</div>
</body>
</html>
Explanation
HTML code creates a simple webpage with two containers, "first-container" and "second-container". The body element has a padding of 2% of the viewport width.
The "first-container" has "inline" display value with an orange border and padding of 2 and 10 pixels. It displays the text "This is the first paragraph." The "second container" has "inline" display value with a purple border and padding of 10 pixels. It displays the text "This is the second paragraph." The containers are displayed side by side separated by body padding.
Use inline-block Property
This is similar to the previous method but not the same.
The differences between using inline and inline blocks are as follows −
"inline" elements are placed inline with text and only take up as much width as necessary. They do not create a new block formatting context and do not start on a new line, so they cannot have a width, height, or margin set. Examples of inline elements include the "span" tag and the "a" tag.
"inline-block" elements are similar to "inline" elements, but they can have a width, height, and margins set. They also create a new block formatting context, meaning that they can have padding, borders, and background colors set. However, they will still be placed in line with the text and will not start on a new line. Examples of inline-block elements include images with defined dimensions and buttons.
Example
<!DOCTYPE html>
<html lang="en">
<style>
.first-container{
display: inline-block;
padding:3px;
padding:15px;
border: 3px solid rgb(0, 47, 255);
}
.second-container{
display: inline-block;
padding: 15px;
border: 3px solid rgb(92, 24, 42);
}
body{
padding:2vw;
}
</style>
<body>
<div class="first-container">
This is the first paragraph.
</div>
<div class="second-container">
This is the second paragraph.
</div>
</body>
</html>
Use flexbox
A very popular method is to use the flexbox and its associated properties with the tag to avoid the new lines.
Example
<!DOCTYPE html>
<html lang="en">
<style>
.first-container {
padding: 3px;
padding: 15px;
border: 3px solid rgb(13, 108, 75);
}
.second-container {
padding: 15px;
border: 3px solid rgb(214, 59, 100);
}
.third-container {
padding: 15px;
border: 3px solid rgb(59, 59, 214);
}
body {
padding: 2vw;
}
.container {
display: flex;
flex-direction: row;
}
</style>
<body>
<div class="container">
<div class="first-container">This is the first element.</div>
<div class="second-container">This is the second element.</div>
<div class="third-container">This is the third element.</div>
</div>
</body>
</html>
Explanation
This HTML code creates a simple webpage with three containers each with a different class. The body element has padding set to 2% of the viewport width. The first-container, second-container, and third-container elements are given padding and a border with different colors.
The containers are placed inside a parent container with the class "container" which has display: flex and flex-direction: row styles. This sets the container element as a flex container and displays the child elements in a row, inline, and with respective styles and padding.
Conclusion
This article taught us how to avoid new lines using tags. We can use inline, inline blocks, flex-box properties, etc., to avoid new lines. The programmers equally use all these methods.
2K+ Views
