title: Browser dev tools - Computed vs Rules tabs
body: <p>Under the "Rules" tab I can see styles that are either directly assigned, inherited or styles that come from "User Agent Stylesheet". As you can see there is no <code>line-height</code> set in here. However, when I switch to the "Computed" tab, I can see the <code>line-height</code> is 47px. Why is it and where is it coming from? Shouldn't it be located under the "Rules" tab somewhere in the "User Agent Stylesheet"? I don't quite understand how all those rules are categorised, I thought that "User Agent Stylesheet" shows all the default styles for a particular element. However, it looks like this is not the case. Thanks in advance for clearing this up for me.</p>
  
  <p><img src="https://i.stack.imgur.com/8QnFN.png" width="300"></p>
  
  <p><img src="https://i.stack.imgur.com/ZhLtM.png" width="300"></p>