文本之间的行间距

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

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

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

你必须为你的班级使用填充属性＆＃34; POPULARNI KURZY＆＃34;。

例如：

padding: 10px 20px;

将在左侧和右侧添加10px填充（空格），在顶部和底部添加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>

  

嗨，如果你可以设法覆盖文本的背景颜色，如   要白色或背景颜色相同，那么这个   例子可以工作。