css - 在左侧添加空间

标签 css

如何在文本左侧添加空白?

https://jsfiddle.net/ydL4emkd/

.camera_caption {
  display: inline-block;
  position: relative;
  width: 717px;
  padding: 10px 20% 10px 10px;
  color: white;
  text-decoration: none;
  overflow: hidden;
}
.camera_caption:before,
.camera_caption:after {
  position: absolute;
  content: '';
  height: 50%;
  width: 100%;
  left: -15%;
  z-index: -1;
  background: red;
}
.camera_caption:before {
  top: 0px;
  transform: skew(45deg);
}
.camera_caption:after {
  bottom: 0px;
  transform: skew(-45deg);
}

我需要得到这个视觉结果:

enter image description here

最佳答案

在左边添加更多的内边距

.camera_caption {
 ....
  padding-left: 100px;
}

关于css - 在左侧添加空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35798934/

相关文章:

javascript - 如何在不阻塞水平行的情况下创建两列

css 在 chrome 和 IE 中不起作用

jQuery 动画在 Firefox 中不起作用

html - 带有 Bootstrap 3 的 .navbar-brand 内的垂直对齐 Logo

css - 单行类

html - IE7元素无法点击

java - Wicket 选项卡式面板/向导未在正确位置呈现

html - 无法滚动可折叠的固定导航列表

CSS 无法识别数值的 HTML ID

html - 当正文溢出设置为隐藏时,包含 Flexbox 的 Div 不会滚动