在左側添加空格

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>