在新行上使用填充和填充取消自己

Question

我試圖通過填充左邊界來從邊框填充空間，但是當我使用<br />來包裝已創建的新行上取消的填充時。 這裏是我的代碼：

HTML：

<div class="block1"> 
<br /> 
<span class="text1"> 
    test test test test test test test test test test test test test test test test test test test test test test test test<br /> test test test test test test test test test test test test test test test test test test test test test 
</span> 
</div> 

CSS：

.block1{ 
    background: #e1d9d9; 
    width: 600px; 
    height: 500px; 
    margin: 100px 70px 0; 
    border: 1px solid #000; 
    border-radius: 25px; 
    box-shadow: 5px 5px 20px #888888; 
} 
.text1{ 
    padding-left: 20px; 
} 

小提琴：

http://jsfiddle.net/cy7x9j6g/3/embedded/result/

如何解決新行問題的填充問題？

Answer 1

使用顯示：塊/內聯塊使用pedding在它

.text1{display:block} 

Answer 2

這是因爲span s爲inline元件，這是他們對填充如何反應。要應用的填充在你期望任何方式：

更改span到display: inline-block;：

.block1{ 
 
    background: #e1d9d9; 
 
    width: 600px; 
 
    height: 500px; 
 
    margin: 100px 70px 0; 
 
    border: 1px solid #000; 
 
    border-radius: 25px; 
 
    box-shadow: 5px 5px 20px #888888; 
 
} 
 
.text1{ 
 
    display: inline-block; 
 
    padding-left: 20px; 
 
}

<div class="block1"> 
 
     <br /> 
 
     <span class="text1"> 
 
      test test test test test test test test test test test test test test test test test test test test test test test test<br /> test test test test test test test test test test test test test test test test test test test test test 
 
     </span> 
 
     </div>

應用填充到父，而不是：

.block1{ 
 
    background: #e1d9d9; 
 
    width: 580px; 
 
    height: 500px; 
 
    margin: 100px 70px 0; 
 
    padding-left: 20px; 
 
    border: 1px solid #000; 
 
    border-radius: 25px; 
 
    box-shadow: 5px 5px 20px #888888; 
 
}

 <div class="block1"> 
 
     <br /> 
 
     <span class="text1"> 
 
      test test test test test test test test test test test test test test test test test test test test test test test test<br /> test test test test test test test test test test test test test test test test test test test test test 
 
     </span> 
 
     </div>