文本之间的第 space 行

Question

我需要有关文本行距的帮助和一张图片只是为了知道我需要什么：

这是我的 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

.popular_courses h3 span { padding: 0 15px; }

通过这行代码，您将在文本的左侧和右侧放置 space，并用白色背景填充。

Answer 2

我认为这是比调整行高更好的方法来达到预期效果。

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

您必须在 "POPULARNI KURZY" 左右为您的 class 使用 padding 属性。

例如：

padding: 10px 20px;

将在左侧和右侧添加 10px 的内边距 (space)，在顶部和底部添加 20px 的内边距。

你需要的是：

padding: 50px 0;

（这将在左侧添加 50px 的填充，在右侧添加 50px，在底部和顶部添加 0）。

Answer 4

你可以这样做：

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 5

理论

您正在寻找填充选项：

// padding: top right bottom left
padding: 1px 2px 3px 4px;

你也可以像这样使用填充：

// padding: top&bottom left&right
padding: 0px 10px;

或使用单独的语句：

padding-top: 0px;
padding-right: 10px;
padding-bottom: 0px;
padding-left:10px;

练习

如果您的文本在 span 标签内，那么您的 css 应该是这样的：

.popular_courses h3 span { 
    background: #fff none repeat scroll 0 0;
    padding: 0 20px;
}

这样文本两边就会有 20 像素的内边距！

Answer 6

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

文本之间的第 space 行

Line space between text

css

text

line

space