<div class="block-parent"> <p>Some text Some text Some text Some text Some text Some text</p> <div class="block-children"> <p>Some text Some text Some text Some text Some text Some text</p> </div> <p>Some text Some text Some text Some text Some text Some text</p> </div>

How to add to .block-children exception?

    2 answers 2

    You can try changing the scale of the child. For the parent, set the zoom, and for the child, zoom, for example:

     .block-parent { zoom: 2; } .block-children { zoom: .5; } 
     <div class="block-parent"> <p>Some text</p> <div class="block-children"> <p>Some text</p> </div> <p>Some text</p> </div>

    • zoom: 2 - doubled the scale
    • zoom: .5 - changed by 0.5 times, that is, twice reduced

    In the exception, I think, can not be added. Link: zoom

    • Do not tell me how much I need to increase the child if the parent has a zoom: 0.655814; I mean, how do I calculate? - user258149
    • @ user258149 - use the goodmice answer through variables and a calculated value. In general, if a zoom has a value less than one, this is a decrease - Denis Bubnov

    You can use css variables

     :root{ --zoom: 2; } #parent{ zoom: var(--zoom); } #child{ zoom: calc(1 / var(--zoom)); }
    • And if I have the opposite, where the value is 2, I have 0.5. How to calculate in such cases? - user258149 7:34 pm
    • @ user258149 nothing changes: 1 / 0.5 = 2, respectively, 2x zoom from 0.5 is 1 - goodmice