Line space between text - css

Question

I need help with line spacing between text
and a picture just to know what I need:
Here is my CSS:
.popular_courses h3 {
font-size: 20px;
text-align: center;
text-transform: uppercase;
margin-top: 60px;
margin-bottom: 20px;
}
.popular_courses h3 {
border-bottom: 1px solid #ddd;
line-height: 0.1em;
margin: 60px auto 20px;
width: 70%;
}
.popular_courses h3 span {
background: #fff none repeat scroll 0 0;
}

Answer 1

I think this is a better way to achieving the desired result instead of adjusting the line height.
.popular_courses h3 {
position: relative;
text-align: center;
}
.popular_courses h3:before {
content: "";
position: absolute;
top: 50%;
left: 15%;
width: 70%;
margin-top: -1px;
height: 2px;
background-color: #ddd;
}
.popular_courses h3 span {
position: relative;
display: inline-block;
background-color: #fff;
padding: 0 20px;
}
<div class="popular_courses">
<h3><span>POPULAR COURSES TITLE</span></h3>
</div>

Answer 2

You have to use padding property for your class around "POPULARNI KURZY".
For eg:
padding: 10px 20px;
will add 10px padding (space) on left and on right sides, and 20px padding on top and bottom sides.
What you need is something like:
padding: 50px 0;
(This will add 50px padding on left, 50px on right and 0 for bottom and top sides).

Answer 3

You can do this:
CSS
.popular_courses {
position:relative;
display: block;
width: 70%;
text-align: center;
margin 0 auto;
z-index:1;
}
.popular_courses:before {
position:absolute;
content:"";
height: 1px;
background: #000;
width: 100%;
z-index:2;
left:0;
top: 50%;
transform: translateY(-50%);
}
.popular_courses h3 {
position: relative;
display: inline-block;
line-height: 0.1em;
background: #fff;
padding: 0px 30px; // -> ADJUST HERE YOUR PADDING NEED
z-index:3;
}
HTML
<div class="popular_courses">
<h3>teste</h3>
</div>
DEMO HERE

Answer 4

Theory
You are looking for the padding option:
// padding: top right bottom left
padding: 1px 2px 3px 4px;
you can also use padding like this:
// padding: top&bottom left&right
padding: 0px 10px;
or with separate statements:
padding-top: 0px;
padding-right: 10px;
padding-bottom: 0px;
padding-left:10px;
Practice
if your text is inside the span tag then your css should be like:
.popular_courses h3 span {
background: #fff none repeat scroll 0 0;
padding: 0 20px;
}
so that the text will have a 20 pixel padding on both sides!

Answer 5

.heading {
text-align: center;
position: relative;
z-index: 10;
}
span {
display: inline-block;
background: #fff;
padding: 0 10px;
position: relative;
z-index: 10;
}
.heading:after {
content: '';
display: block;
border-bottom: 3px solid #ccc;
width: 100%;
position: absolute;
z-index: 5;
top: 50%;
}
<h1 class="heading">
<span>Some nice heading</span>
</h1>
Hi, If you can manage to cover the background-color of the text like
to white or to the same color of background-color, then this
example can work.

Answer 6

.popular_courses h3 span { padding: 0 15px; }
With this line of code you will put space in the left and right side of the text and it will be filled with white background.