在左側添加空格

如何在文本左側添加空白空間？在左側添加空格

.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

在左側添加空格

回答

相關問題