HTML/CSS - Inline-block
Inline-blockのプロパティを記録する
Westagramの作成時にこのプロパティがどのように動作するか
出所:説明の下に明記する
行ブロックのプロパティ
私の最初の開発記事でも、inline blockはinlineの欠点を補うことができると述べました.
新しいInline Block機能
前の記事では、inline/block/inline-blockに対応するタグと特徴を簡単にまとめました.
しかし、今回Westagramを作成する際には、新しいインラインブロックの特徴はインラインブロックの間に
공백が発生することです.<!--html-->
<body>
<div class="testContainer">
<img alt="dog" src="dog.jpg">
<div class="box1">testbox2</div>
<div class="box2">testbox3</div>
</div>
</body>/*css*/
.box1, .box2{
border:1px solid black;
}
.testContainer img{
height:50px;
}
.box1{
background-color: lightcoral;
width: 90px;
height:50px;
}
.box2{
background-color: mediumpurple;
width:120px;
height:100px;
}
divタグはblockなので、下にtestboxが現れます.
このとき
.box1, .box2{
border:1px solid black;
display:inline-block;
}
そばに現れます.
しかし、この場合、inline block間に間隔が生じることがわかります.
HTMLソースのスペースのためです.ソースコードから空白をクリアすると間隔は消えますが、インデントが混乱するため、他の方法が必要です.
この時の書き方.
これは親ラベルに対して
{font-size:0}を行う方法です.しかし、これはすべてのテキストに適用され、テキストが表示されなくなります.そのため、この場合はフォントサイズを別々に再付与する必要があります.
上記の例では、
.testContainer{
font-size:0;
}
.box1, .box2{
border:1px solid black;
display:inline-block;
font-size:13px;
}
これで間隔がなくなり、テキストもよく見えます.
また、上記の例のように
inline-blockを使用した後、
만약 높이가 맞지않는다면(ここでは、写真とdivラベルの高さが一致しません).vertical-align:top;を与えると上位空白も消える..box1, .box2, img{
vertical-align: top;
}
高さが合う.
JSのinline-blockタグ
Westagramのコメント機能を実装する際に発生する問題は、次のとおりです.
すなわち、jsにおいて
createElementによって作成されたspan、strongなどのinline要素はスペースを生成しない.これは、HTMLでインデントのために作成したスペースが適用されないためです.
HTMLで作成したコメントのように、プロファイル名とコメントの間にスペースは表示されません.
一番下のコメントのように、履歴書の名前とコメントがそのまま貼られています.この問題を解決するためにjs内にスペースを作成することにした.
最初は
$nbsp;を利用してスペースを作成しましたが、適用されないので、もう一度探しました.💡 ユニコードを使うべきだそうです.nonbreakspaceのUnicodeは
\u00A0です.
では今.
履歴書名とコメントのギャップが見えてきます!!
参考資料出所:https://studiomeal.com/archives/282
Reference
この問題について(HTML/CSS - Inline-block), 我々は、より多くの情報をここで見つけました https://velog.io/@5ceanzoo/HTMLCSS-Inline-blockテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol