CSS Tutorial: Inheritance of Line-height properties

<style type= "Text/css"
p {
    line-height:17px;
}
</style>

<div class= "Mdse-detail"
    <p>
        <strong style= "font-size:30px"
            Brand: xzx<br/>
            Market Price: 145 yuan <br/>
            color: Black <br/>
             Fabric: Cotton <br/>
             size:s  m  l<br/>
             Length: S 89  M 90   L 91<br/>
             Shoulder width: S 35  M 36   L 37<br/>
             Bust: S 88  M 92   L 96<br/>
            hem: S M 108  L 112<br/>
             sleeve Length: S 17  M 17.5 l18<br/>
             due to different measurement methods, the error is around 2CM!
        </strong>
    </p>
</div>

You will find that the above example text will overlap! What's the reason?

Because the P element in the. Detail-content inherits the global style line-height:17px of the default setting, and the custom block is custom made by the merchant, the font is set to font-size:30px (possibly any value), depending on the Inline Formatting model, learned that the text of the Line-box high 17px, more out of the font part of the overflow, so there will be font overlap phenomenon.

How can this problem be solved?

Solution: We set the style attribute line-height:1.4 to the P element under Mdse-detail.

Why do 1.4 of solutions take no units?

The value of the Line-height property of the element inherits the Line-height attribute value of the parent element (or ancestor element), and if the property value has a unit, the inherited value is the converted PX value rather than the original value (for example: EM,%), and if the property value has no units, The browser inherits the value (no units) and then resolves the new Line-height value based on the font value of the element. This and table's TR set display property is a little bit similar (Tr.style.display = ";, IE displays block, and Firefox and other standard browsers display Table-row).

There is another relatively inefficient approach, but it is also a quick solution:

. mdse-detail p * {
line-height:140%;
}