What I’m trying to do
I am trying to modify CSS in order to to make the space between headers in editing view match those in reading view.
The problem
I have already configured everything regarding margins/paddings, they are equal in both views. But now I’m facing the fact that the height of the header content is different in editing view and in reading view. The header content in editing view is always higher.
HTML & CSS
# I'm talking about this type of elements (HyperMD-header)
# Editing view
<div class="cm-active HyperMD-header HyperMD-header-1 cm-line">
<div class="cm-fold-indicator" contenteditable="false">
<div class="collapse-indicator collapse-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon right-triangle">
<path d="M3 8L12 17L21 8"></path>
</svg>
</div>
</div>
<img class="cm-widgetBuffer" aria-hidden="true">
<img class="cm-widgetBuffer" aria-hidden="true">
<span contenteditable="false"></span>
<img class="cm-widgetBuffer" aria-hidden="true">
<span class="cm-header cm-header-1">Header 1</span>
</div>
# CSS (editing view) computed
font-size: 54.06px;
line-height: 64.872px #(the actual value is 1.2);
box-sizing: border-box;
caret-color: rgb(190, 190, 190);
clear: left;
color: rgb(190, 190, 190);
color-scheme: dark;
display: block;
font-family: Rubik, "??", Rubik, "??", Rubik, "Glow Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", sans-serif, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Microsoft YaHei Light", sans-serif;
font-style: normal;
font-variant-alternates: normal;
font-variant-caps: normal;
font-variant-east-asian: normal;
font-variant-ligatures: normal;
font-variant-numeric: normal;
font-weight: 700;
height: 108.875px;
letter-spacing: -0.8109px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
max-width: 700px;
overflow-wrap: anywhere;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 40px;
position: relative;
tab-size: 4;
text-rendering: optimizelegibility;
text-shadow: rgb(255, 0, 255) 0px 0px 27.03px;
text-wrap: wrap;
white-space-collapse: break-spaces;
width: 578px;
word-break: break-word;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-webkit-user-modify: read-write-plaintext-only;
Explanation
Reading view
In reading view it’s simple:
font-size: X pxline-height: Y- content height: (X * Y) px
So the content height in reading view is (54.06 * 1.2) = 64.872 px
Editing view
But in editing view it doesn’t work like that. The content height is always a few pixels bigger than XY.
Question
You can see in CSS above that computed line-height in editing view is 64.872, so it completely matches the content height in reading view, but somehow in editing view the content height is not 64.872, but 68.875. I can’t understand where these 4 px came from?
I just know that it is not always 4 px. If i decrease font-size to 10px it would be 2 extra pixels. If I descrese font-size to 1px, it would be 0.68 extra pixel. Only if descrease font-size to 0, there would be 0 extra-pixles.
Please help me to get rid of them so that the content height in headers in editing view would match the content height in headers in reading view.