Fixed line-height space

Developer
Toshiyuki TAKAHASHI
Size
4,617 Kb
Views
30,360
  1. Fixed line-height space Previews
  2. Fixed line-height space HTML Codes
  3. Fixed line-height space CSS Codes
  4. Fixed line-height space JS Codes

How do I make an fixed line-height space?

Eliminate the first line & end line space in the text box.. What is a fixed line-height space? How do you make a fixed line-height space? This script and codes were developed by Toshiyuki TAKAHASHI on 30 September 2022, Friday.

Fixed line-height space Previews
IQ Test

Fixed line-height space - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Fixed line-height space</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <h1>line-heightによる上下の隙間を埋める（jQueryプラグイン）</h1> <p class="note">サンプルをクリックすると背景色の白が透明になります</p> <div class="sample sample-1"> <h2>line-height:2</h2> <div class="sample-content before"> <h3>Before</h3> <p>いろは</p> <p>Aa</p> </div> <div class="sample-content after"> <h3>After</h3> <p class="fixed-margin">いろは</p> <p class="fixed-margin">Aa</p> </div> </div> <div class="sample sample-2"> <h2>〈見出し〉line-height:1.75　〈本文〉line-height:2</h2> <div class="sample-content before"> <h3>Before</h3> <div class="text-box"> <h4>ブドリは二時間ばかり歩いて、停車場へ来ました。</h4> <p>それから一月ばかりたって、森じゅうの栗の木に網がかかってしまいますと、てぐす飼いの男は、こんどは粟のようなものがいっぱいついた板きれを、どの木にも五六枚ずつつるさせました。そのうちに木は芽を出して森はまっ青になりました。すると、木につるした板きれから、たくさんの小さな青じろい虫が糸をつたって列になって枝へはいあがって行きました。</p> </div> </div> <div class="sample-content after"> <h3>After</h3> <div class="text-box"> <h4>ブドリは二時間ばかり歩いて、停車場へ来ました。</h4> <p>それから一月ばかりたって、森じゅうの栗の木に網がかかってしまいますと、てぐす飼いの男は、こんどは粟のようなものがいっぱいついた板きれを、どの木にも五六枚ずつつるさせました。そのうちに木は芽を出して森はまっ青になりました。すると、木につるした板きれから、たくさんの小さな青じろい虫が糸をつたって列になって枝へはいあがって行きました。</p> </div> </div> </div> <div class="sample sample-3"> <h2>line-height:2.3</h2> <div class="sample-content before"> <h3>Before</h3> <div class="text-box"> <img src="https://placehold.jp/300x200.png" alt="" /> <p>その室の右手の壁いっぱいに、イーハトーヴ全体の地図が、美しく色どった大きな模型に作ってあって、鉄道も町も川も野原もみんな一目でわかるようになっており、そのまん中を走るせぼねのような山脈と、海岸に沿って縁をとったようになっている山脈、またそれから枝を出して海の中に点々の島をつくっている一列の山々には、みんな赤や橙や黄のあかりがついていて、それがかわるがわる色が変わったりジーと蝉のように鳴ったり、数字が現われたり消えたりしているのです。下の壁に添った棚には、黒いタイプライターのようなものが三列に百でもきかないくらい並んで、みんなしずかに動いたり鳴ったりしているのでした。ブドリがわれを忘れて見とれておりますと、その人が受話器をことっと置いて、ふところから名刺入れを出して、一枚の名刺をブドリに出しながら「あなたが、グスコーブドリ君ですか。私はこういうものです。」と言いました。見ると、〔イーハトーヴ火山局技師ペンネンナーム〕と書いてありました。その人はブドリの挨拶になれないでもじもじしているのを見ると、重ねて親切に言いました。</p> </div> </div> <div class="sample-content after"> <h3>After</h3> <div class="text-box"> <img src="https://placehold.jp/300x200.png" alt="" /> <p class="fixed-margin">その室の右手の壁いっぱいに、イーハトーヴ全体の地図が、美しく色どった大きな模型に作ってあって、鉄道も町も川も野原もみんな一目でわかるようになっており、そのまん中を走るせぼねのような山脈と、海岸に沿って縁をとったようになっている山脈、またそれから枝を出して海の中に点々の島をつくっている一列の山々には、みんな赤や橙や黄のあかりがついていて、それがかわるがわる色が変わったりジーと蝉のように鳴ったり、数字が現われたり消えたりしているのです。下の壁に添った棚には、黒いタイプライターのようなものが三列に百でもきかないくらい並んで、みんなしずかに動いたり鳴ったりしているのでした。ブドリがわれを忘れて見とれておりますと、その人が受話器をことっと置いて、ふところから名刺入れを出して、一枚の名刺をブドリに出しながら「あなたが、グスコーブドリ君ですか。私はこういうものです。」と言いました。見ると、〔イーハトーヴ火山局技師ペンネンナーム〕と書いてありました。その人はブドリの挨拶になれないでもじもじしているのを見ると、重ねて親切に言いました。</p> </div> </div> </div>
</div> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Fixed line-height space - Script Codes CSS Codes

div, p, h1, h2, h3, h4 { box-sizing: border-box; padding: 0; margin: 0;
}
.container { min-width: 800px;
}
body { background: #E8E8E7; padding: 60px; line-height: 1.6;
}
h1 { text-align: center; font-size: 32px; font-weight: bold; color: #362F3C; margin: 0 0 15px;
}
.note { text-align: center; font-size: 14px; margin: 0 0 30px;
}
.sample { padding: 30px; overflow: hidden;
}
.sample .sample-content { padding: 30px;
}
.sample h2 { text-align: center; background: #362F3C; color: #fff; margin-bottom: 30px; padding: 15px;
}
.sample h3 { text-align: center; margin-bottom: 10px; font-weight: bold; font-size: 20px; margin-bottom: 30px; color: #362F3C; border-bottom: 1px solid #362F3C; padding-bottom: 30px;
}
.sample .sample-content.no-bg * { background: transparent;
}
.sample-1 { text-align: center;
}
.sample-1 .sample-content { display: inline-block; margin: 0 15px; vertical-align: top;
}
.sample-1 .sample-content p { font-size: 120px; line-height: 2; background: #fff; border: 1px dotted #362F3C; margin-bottom: 10px;
}
.sample-2 .sample-content { float: left; width: 50%; line-height: 2;
}
.sample-2 .sample-content .text-box { border: 1px dotted #362F3C; padding: 30px;
}
.sample-2 .sample-content h4 { line-height: 1.75; font-size: 24px; background: #fff; margin-bottom: 30px;
}
.sample-2 .sample-content p { font-size: 14px; background: #fff;
}
.sample-3 .sample-content { overflow: hidden;
}
.sample-3 .sample-content .text-box { border: 1px dotted #362F3C; padding: 30px;
}
.sample-3 .sample-content img { float: left; margin-right: 30px;
}
.sample-3 .sample-content p { line-height: 2.3; background: #fff;
}

Fixed line-height space - Script Codes JS Codes

// fixlineheight v0.8.1
(function($) { $.fn.fixlineheight = function(type) { return this.each(function() { var $this = $(this); var lh = parseFloat($this.css('line-height')); var fs = parseFloat($this.css('font-size')); if((lh - fs) <= 0) return $this; var $inner = $this.wrapInner('<div />').children().eq(0).addClass('fixlinehight-inner'); $this.addClass('fixlinehight-wrapper'); var sp = (lh - fs) / 2; var nmg = (-sp-1) + 'px ' + '0 ' + (-sp-1) + 'px'; $inner.css('margin', nmg); $this.css({ 'overflow' : 'visible', 'padding-bottom' : '+=1px', 'padding-top' : '+=1px' }); }); };
})(jQuery);
$(function(){ // Activate plugin $('.sample-1 .fixed-margin').fixlineheight(); $('.sample-2 .after .text-box').children('h4, p').fixlineheight(); $('.sample-3 .fixed-margin').fixlineheight(); // Toggle background color $('.sample-content').on('click', function(){ $(this).toggleClass('no-bg'); });
});
Fixed line-height space - Script Codes
Fixed line-height space - Script Codes
Home Page Home
Developer Toshiyuki TAKAHASHI
Username gau
Uploaded September 30, 2022
Rating 3
Size 4,617 Kb
Views 30,360
Do you need developer help for Fixed line-height space?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Toshiyuki TAKAHASHI (gau) Script Codes
Name
Blue light button
Add lines on both sides of the title by flex-box
Vue.js and Responsive
A Pen by Toshiyuki TAKAHASHI
STAR WARS OPENING CSS
Digital Clock with Vue.js
Screen effect
Slash Background Test
No nest max-width
Off-registration button
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!