開発者のブログではよく各言語に関する変数名やメソッド名などのようなキーワードを強調して表示する必要がありますね。「AV女優.com 開発者ブログ」を見るとき「これだっ！」と思ったCSSをから借りました、@sunomaruさんに感謝です！
em {
font-weight: normal;
font-style: normal;
white-space: nowrap;
border: 1px solid #ccc;
padding: 0.1em 0.6em;
background: #f9f9f9;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
}
emタグで囲めばいいですよ〜どうでしょう〜！
Webkit-baseのブラウザ(Safari, Google Chrome)に適用します。
普通のcheckboxはiphoneのようなスマートフォンで見るときとても小さいです。checkboxはcssでheightやwidthを指定しても効かないためちょっとしかトリックが必要です。
input[type=checkbox] { -webkit-transform: scale(2,2);}実機ではこんなふうになります。2.0, 1.5, 1.0の3つのサンプルです。
まずGoogleが実際使っている画像ファイルを見てみましょう。
いろんな画像、アイコンが混じっていますね。
そして実際使うときはCSSのbackground-positionで表示するモノを指定しているようです。
例えば検索結果の星マークのCSSを見ると
background-position: -117px -117px;
Webサーバとのコネクションが1回で済むので、
それが狙いですね。
background-positionに関しての説明は：
background-position－スタイルシートリファレンス
ちなみにこういることをやってくれるライブラリもあるようです。
使ったことはまだないですけど。
見たの通りform前後の余白を消しました。
これはフォームがテーブルなどを跨がる場合に
レイアウトを調整するのに非常に役に立ちます。
formのmarginを0pxに設定します。
<form style="margin:0px;">
またmargin-topやmargin-bottomでなどで詳しく指定できます。
マイナス値も入力でき、さらに間隔を縮むめることができます。