在左侧添加空格

如何在文本左侧添加空白空间？在左侧添加空格

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

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

来源

2016-03-04 Peter Penzov

更改左填充到像'填充：10px的20％10px的5％;' – Harry

只是增加你的左填充。例如，如果不希望填充影响宽度，可以在容器中添加'30px 20％10px 10px;' – Chris

并添加'box-sizing：border-box;'。 –

添加更多的填充向左

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

来源

2016-03-04 14:54:31 raven

添加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>

来源

2016-03-04 14:54:49 Nick

在左侧添加空格

回答

相关问题