Line space between text

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;
}

do you mean below the text or at the sides? YOur image makes me think you mean before and after the text, between the grey lines. — Sam Willis, Oct 23 '15 at 13:37
Is this what you are trying to do http://stackoverflow.com/questions/23584120/line-before-and-after-centered-text-over-transparent-background ? — web-tiki, Oct 23 '15 at 13:37

Viktor Maksimov · Answer 1 · 2015-10-24T08:45:09.860

0

.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.

edited Oct 24 '15 at 08:45

answered Oct 23 '15 at 13:38

Viktor Maksimov

1,465
1
10
11

Please consider editing your post to add more explanation about what your code does and why it will solve the problem. An answer that mostly just contains code (even if it's working) usually wont help the OP to understand their problem. – Drenmi Oct 24 '15 at 08:42

score 0 · Accepted Answer · answered Oct 23 '15 at 13:38

0

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>

answered Oct 23 '15 at 13:38

Balaji Viswanath

1,684
1
12
19

1

What if the title is to go over an image? Having the background on the span will not work as intended. Using `:before` and `:after` to do the lines as shown here: http://stackoverflow.com/questions/23584120/line-before-and-after-centered-text-over-transparent-background will be the best way. – Sam Willis Oct 23 '15 at 13:41
Depends one where the title is positioned. I agree with you. But from the screenshot attached with this question, i can see that the h3 tag resides on a white background. – Balaji Viswanath Oct 23 '15 at 13:43
But the solution is already half way there, the `:before` just needs styling correctly and an `:after` creating and you wouldn't need the span at all. – Sam Willis Oct 23 '15 at 13:45

score 0 · Answer 3 · answered Oct 23 '15 at 13:44

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).

score 0 · Answer 4 · answered Oct 23 '15 at 13:46

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

score 0 · Answer 5 · answered Oct 23 '15 at 13:48

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!

score 0 · Answer 6 · answered Oct 23 '15 at 14:19

.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.

Line space between text

6 Answers6