Help us understand the problem. What is going on with this article?

忘れてしまうCSSの超基本

More than 1 year has passed since last update.

普段書かないので、あれどうやるんだっけと思ったときにメモしてます。

margin プロパティの順番

margin: 10px;                /*上下左右*/
margin: 10px 20px;           /*上下、左右*/
margin: 10px 20px 30px;      /*上、左右、下*/
margin: 10px 20px 30px 40px; /*上、右、下、左*/

clearfix

float: left;

などfloat指定された要素のみを子要素として持つ親要素は、そのサイズが計算されず、正しく表示されない。
そこで、以下のようにclearfix classに疑似要素を作って

.clearfix::after {
  content: '';
  display: block;
  clear: both;
}

親要素に

<div class="clearfix">
  <div class="floating">I'm floating</div>
</div>

と指定することで、表示崩れを直せる。

width, height にpaddingとborderも含める

デフォルトではbox-sizing: content-boxとなっていて、widthの値が示すサイズはpadding, borderを含まない。box-sizing: border-boxとすると、padding,borderを含んだサイズになる。

width: 30%;
padding: 15px;
box-sizing: border-box;

line-height に倍率だけ指定する

line-heightに倍率だけ指定すると、fontサイズに対する倍率で高さを指定することができる。

font-size: 10px;
line-height: 1.5;

文字を上下の中心に配置する

heightline-heightを同じにすることで、上下中央揃えにすることができる。
ただしこれは1行のものに有効。

height: 30px;
line-height: 30px;

marginの相殺

  • 隣り合う要素のmarginは相殺される
  • 子要素のmarginは親要素を突き抜ける

文字を省略して表示する

text-overflow: ellipsis; /*...と省略する*/
white-space: nowrap;     /*改行を禁止する*/
overflow: hidden;        /*はみ出した部分は表示しない*/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away