在左侧添加空间

Question

如何在文本左侧添加空白区域？

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

我需要得到这个视觉效果：

Answer 1

在左侧添加更多填充

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

Answer 2

添加padding-left

.camera_caption {
  display: inline-block;
  position: relative;
  width: 717px;
  padding: 10px 20% 10px 70px;
  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);
}

<div class="camera_caption">Some text</div>

<div class="camera_caption">Some text
  <br>spanning across
  <br>multiple line</div>

<div class="camera_caption">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius eros id consequat tempor. Nunc non libero nisi. Curabitur ultricies, magna eget hendrerit viverra, nibh leo faucibus est, eget efficitur mauris purus ut libero. Ut in arcu in leo
  ornare tristique. Quisque rutrum lectus a lorem sollicitudin porta. Etiam placerat felis metus, non luctus felis placerat et. Nam lacinia libero enim, ut placerat mi accumsan eget. Ut viverra ipsum sit amet leo gravida, ac consequat ligula consequat.
  Etiam consequat ex a augue rutrum, sed convallis est volutpat. Aliquam erat volutpat. Morbi pretium sem nec ipsum sollicitudin facilisis. Maecenas accumsan eleifend neque sit amet ornare. Curabitur condimentum arcu at tellus ullamcorper pretium. Mauris
  lorem nisl, pulvinar eu lectus tincidunt, luctus fringilla diam.</div>