「我」中的「P」標籤進入文字和不受保證金

Question

上面，左側的圖標不會受我的p標籤，但正確的是。

p { 
 
    font-family: Montserrat; 
 
    height: 100%; 
 
    width: 60%; 
 
    background: #e6e6e6; 
 
    color: #505050; 
 
    font-size: 1.3em; 
 
    display: flex; 
 
    justify-content: space-around; 
 
    align-items: center; 
 
    flex-direction: column; 
 
    i:nth-child(1) { 
 
    position: absolute; 
 
    font-size: 0.5em; 
 
    margin-top: 2em; 
 
    margin-right: 1em; 
 
    } 
 
    i:nth-child(2) { 
 
    position: absolute; 
 
    font-size: 0.5em; 
 
    margin-bottom: 1em; 
 
    margin-left: 1em; 
 
    } 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" /> 
 
<p> 
 
    <span>%%%</span> 
 
    <span>%%%</span> 
 
    <span>%%%</span> 
 
    <span> 
 
     <i class="fa fa-quote-left fa-1x" aria-hidden="true "></i> 
 
     Fondateur du studio 
 
     <i class="fa fa-quote-right" aria-hidden="true"></i> 
 
    </span> 
 
</p>

Answer 1

p { 
 
    font-family: Montserrat; 
 
    background: #e6e6e6; 
 
    color: #505050; 
 
    font-size: 1.3em; 
 
    padding-left: 1em; 
 
    position: relative; 
 
} 
 

 
i:nth-child(1) { 
 
    position: absolute; 
 
    font-size: 0.5em; 
 
    top: 0px; 
 
    left: 1em; 
 
} 
 

 
i:nth-child(2) { 
 
    position: absolute; 
 
    font-size: 0.5em; 
 
    margin-bottom: 1em; 
 
    right: 1em; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> 
 
<p> 
 
    <span> 
 
     <i class="fa fa-quote-left" aria-hidden="true"></i> 
 
     Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum mollitia blanditiis voluptatum consequuntur in harum! Porro, sequi! Molestiae iure nam maiores eveniet veniam ipsum fuga voluptatibus cum eligendi, odio sint. 
 
     <i class="fa fa-quote-right" aria-hidden="true"></i> 
 
    </span> 
 
</p>