https://b.hatena.ne.jp/entry/s/qiita.com/yama-t/items/da7740769cfc0f8446a0 前置き CSSでの余白の取り方について、後輩に「margin-topとmargin-bottomどっち派ですか？」と聞かれたので、 回答内容を記事として残します。 昔、会社のOJTで学んだことの共有となります。 原則 1. 基本的にma... https://b.hatena.ne.jp/techtech0521/20230520#bookmark-4671060920920444610 2023-05-20T05:33:58Z あとで読む https://b.hatena.ne.jp/latica/20210127#bookmark-4671060920920444610 2021-01-26T22:36:04Z https://b.hatena.ne.jp/takaesu/20200701#bookmark-4671060920920444610 親要素のpaddingで周囲（上下左右）の余白を取る。 1の設定では不可能な、子要素間の余白をmargin-topで取る。 2020-06-30T15:07:49Z margin padding https://b.hatena.ne.jp/s15i/20190912#bookmark-4671060920920444610 2019-09-12T00:52:32Z https://b.hatena.ne.jp/teracy_junk/20190829#bookmark-4671060920920444610 2019-08-29T06:39:06Z css webdesign https://b.hatena.ne.jp/moriconomori/20190812#bookmark-4671060920920444610 2019-08-12T07:07:24Z https://b.hatena.ne.jp/hirorock/20190731#bookmark-4671060920920444610 margin-topのみに制限する必要がある 2019-07-31T04:44:18Z CSS https://b.hatena.ne.jp/etakaha/20190725#bookmark-4671060920920444610 2019-07-24T23:34:08Z CSS https://b.hatena.ne.jp/manhole/20190722#bookmark-4671060920920444610 margin-topを使う。打ち消しはせず隣接セレクタを使う。 2019-07-22T00:59:06Z css https://b.hatena.ne.jp/tomochinchin/20190719#bookmark-4671060920920444610 2019-07-19T02:12:34Z css webデザイン https://b.hatena.ne.jp/hush_in/20190713#bookmark-4671060920920444610 2019-07-13T01:33:01Z css https://b.hatena.ne.jp/hachiame/20190712#bookmark-4671060920920444610 2019-07-12T07:54:56Z HTML, CSS https://b.hatena.ne.jp/m0t0m0t0/20190710#bookmark-4671060920920444610 2019-07-10T11:36:59Z javascript https://b.hatena.ne.jp/Nyoho/20190710#bookmark-4671060920920444610 ほうほうあれトルツメっていうんだ 2019-07-09T23:58:01Z CSS https://b.hatena.ne.jp/cloudliner/20190709#bookmark-4671060920920444610 2019-07-09T10:32:24Z あとで読む https://b.hatena.ne.jp/Lian/20190709#bookmark-4671060920920444610 2019-07-09T00:29:52Z css web design https://b.hatena.ne.jp/Lie_Room/20190708#bookmark-4671060920920444610 2019-07-07T23:33:12Z https://b.hatena.ne.jp/goto_haru/20190706#bookmark-4671060920920444610 2019-07-06T11:00:41Z あとで読む https://b.hatena.ne.jp/o_hiroyuki/20190706#bookmark-4671060920920444610 2019-07-06T05:18:09Z css https://b.hatena.ne.jp/nemu_sou/20190706#bookmark-4671060920920444610 2019-07-06T03:02:56Z https://b.hatena.ne.jp/korin/20190706#bookmark-4671060920920444610 2019-07-05T15:50:43Z あとで読む https://b.hatena.ne.jp/michiomochi/20190705#bookmark-4671060920920444610 margin-bottomではなく出来るだけmargin-topを使う、や子要素のmarginではなく親要素のpaddingを出来るだけ使う等、なんとなくでやってたことを言語化されててよい。 2019-07-05T07:38:58Z https://b.hatena.ne.jp/astk_f/20190705#bookmark-4671060920920444610 2019-07-05T06:33:06Z css https://b.hatena.ne.jp/shinagaki/20190705#bookmark-4671060920920444610 2019-07-05T05:46:57Z https://b.hatena.ne.jp/maikiichan/20190705#bookmark-4671060920920444610 2019-07-05T05:25:46Z https://b.hatena.ne.jp/wazanaka/20190705#bookmark-4671060920920444610 2019-07-05T02:34:12Z css https://b.hatena.ne.jp/brudergolf/20190705#bookmark-4671060920920444610 2019-07-05T01:27:31Z https://b.hatena.ne.jp/oooooni/20190705#bookmark-4671060920920444610 2019-07-05T01:16:26Z https://b.hatena.ne.jp/sintarouchang/20190705#bookmark-4671060920920444610 2019-07-05T00:19:30Z https://b.hatena.ne.jp/mkan_0141/20190705#bookmark-4671060920920444610 2019-07-05T00:19:01Z あとで読む https://b.hatena.ne.jp/kaku1019/20190705#bookmark-4671060920920444610 2019-07-05T00:17:32Z https://b.hatena.ne.jp/eratostennis/20190705#bookmark-4671060920920444610 2019-07-05T00:03:47Z https://b.hatena.ne.jp/u1-5300/20190705#bookmark-4671060920920444610 2019-07-04T23:50:53Z https://b.hatena.ne.jp/lepton9/20190705#bookmark-4671060920920444610 2019-07-04T23:34:10Z css tips https://b.hatena.ne.jp/coocha/20190705#bookmark-4671060920920444610 2019-07-04T23:34:07Z https://b.hatena.ne.jp/kura_htn/20190705#bookmark-4671060920920444610 2019-07-04T23:09:38Z https://b.hatena.ne.jp/seotch/20190705#bookmark-4671060920920444610 2019-07-04T23:00:47Z https://b.hatena.ne.jp/raberu08/20190705#bookmark-4671060920920444610 2019-07-04T22:45:30Z https://b.hatena.ne.jp/nyantajihaneko222/20190705#bookmark-4671060920920444610 2019-07-04T22:43:49Z あとで読む https://b.hatena.ne.jp/kuni-kuni/20190705#bookmark-4671060920920444610 2019-07-04T22:43:11Z https://b.hatena.ne.jp/vcto29/20190705#bookmark-4671060920920444610 2019-07-04T22:20:32Z https://b.hatena.ne.jp/poke-yukio/20190705#bookmark-4671060920920444610 2019-07-04T21:35:35Z あとで読む https://b.hatena.ne.jp/sumomomimi/20190705#bookmark-4671060920920444610 2019-07-04T21:34:41Z css プログラミング https://b.hatena.ne.jp/kemumakii/20190705#bookmark-4671060920920444610 2019-07-04T21:12:26Z https://b.hatena.ne.jp/libertine2/20190705#bookmark-4671060920920444610 2019-07-04T21:12:11Z あとで読む https://b.hatena.ne.jp/tanakaBox/20190705#bookmark-4671060920920444610 2019-07-04T20:09:54Z css https://b.hatena.ne.jp/masato722/20190705#bookmark-4671060920920444610 2019-07-04T19:59:40Z css https://b.hatena.ne.jp/arakuretaro/20190705#bookmark-4671060920920444610 2019-07-04T19:51:57Z https://b.hatena.ne.jp/peketamin/20190705#bookmark-4671060920920444610 2019-07-04T19:47:26Z あとで読む https://b.hatena.ne.jp/little_dove1102/20190705#bookmark-4671060920920444610 2019-07-04T19:23:31Z あとで読む https://b.hatena.ne.jp/shiotaraco/20190705#bookmark-4671060920920444610 2019-07-04T18:33:48Z あとで読む https://b.hatena.ne.jp/norip44/20190705#bookmark-4671060920920444610 存在忘れててごめん…今度からは使う（隣接セレクタ） 2019-07-04T18:31:42Z CSS https://b.hatena.ne.jp/ecoloco/20190705#bookmark-4671060920920444610 2019-07-04T17:43:11Z css https://b.hatena.ne.jp/sekaiiti/20190705#bookmark-4671060920920444610 2019-07-04T17:39:51Z あとで読む https://b.hatena.ne.jp/junkino/20190705#bookmark-4671060920920444610 2019-07-04T17:33:09Z あとで読む https://b.hatena.ne.jp/machupicchubeta/20190705#bookmark-4671060920920444610 2019-07-04T17:23:58Z あとで読む https://b.hatena.ne.jp/kasai-0728/20190705#bookmark-4671060920920444610 2019-07-04T17:22:11Z css あとで読む https://b.hatena.ne.jp/kumachi3/20190705#bookmark-4671060920920444610 2019-07-04T17:10:13Z css tips https://b.hatena.ne.jp/nukosan555/20190705#bookmark-4671060920920444610 2019-07-04T17:09:57Z あとで読む https://b.hatena.ne.jp/I_am_Prowrestler/20190705#bookmark-4671060920920444610 2019-07-04T16:38:02Z あとで読む https://b.hatena.ne.jp/jhnlc69/20190705#bookmark-4671060920920444610 2019-07-04T16:34:17Z CSS あとで読む https://b.hatena.ne.jp/comoselab/20190705#bookmark-4671060920920444610 2019-07-04T16:18:40Z https://b.hatena.ne.jp/morimotozone/20190705#bookmark-4671060920920444610 2019-07-04T16:04:16Z https://b.hatena.ne.jp/minimum_sho/20190705#bookmark-4671060920920444610 2019-07-04T16:02:53Z cas https://b.hatena.ne.jp/hirose504/20190705#bookmark-4671060920920444610 なるほど、隣接セレクタ便利そうだけど、ブコメにあった :not(:first-child) とどっちにするか悩ましいな 2019-07-04T15:42:22Z https://b.hatena.ne.jp/kuyo/20190705#bookmark-4671060920920444610 2019-07-04T15:37:36Z あとで読む https://b.hatena.ne.jp/share_stream/20190705#bookmark-4671060920920444610 2019-07-04T15:26:15Z あとで読む https://b.hatena.ne.jp/developmaso/20190705#bookmark-4671060920920444610 2019-07-04T15:25:43Z あとで読む https://b.hatena.ne.jp/moruritawa/20190705#bookmark-4671060920920444610 2019-07-04T15:25:39Z https://b.hatena.ne.jp/urza358/20190705#bookmark-4671060920920444610 2019-07-04T15:20:59Z css tips https://b.hatena.ne.jp/hachir0/20190705#bookmark-4671060920920444610 2019-07-04T15:19:53Z CSS あとで読む https://b.hatena.ne.jp/roid123/20190705#bookmark-4671060920920444610 2019-07-04T15:19:40Z CSS https://b.hatena.ne.jp/superblueplanet/20190705#bookmark-4671060920920444610 2019-07-04T15:17:26Z https://b.hatena.ne.jp/tech0403/20190705#bookmark-4671060920920444610 記事読む限り、記述が少なくなるからGoodと言ってるように見えるが、隣接要素はレンダリング遅い。もっと言うとmarginよりpaddingの方が遅い（背景色とかも引き継いでの余白だから当然）。bottom減らせて何が嬉しいんだろ？ 2019-07-04T15:01:54Z https://b.hatena.ne.jp/igatea/20190704#bookmark-4671060920920444610 2019-07-04T14:58:26Z https://b.hatena.ne.jp/that04/20190704#bookmark-4671060920920444610 2019-07-04T14:51:49Z https://b.hatena.ne.jp/move0tofu/20190704#bookmark-4671060920920444610 2019-07-04T14:48:48Z あとで読む https://b.hatena.ne.jp/seapig_dolphin/20190704#bookmark-4671060920920444610 2019-07-04T14:47:13Z https://b.hatena.ne.jp/moonblogger/20190704#bookmark-4671060920920444610 2019-07-04T14:45:02Z CSS https://b.hatena.ne.jp/khaibit/20190704#bookmark-4671060920920444610 2019-07-04T14:42:40Z CSS https://b.hatena.ne.jp/seita05/20190704#bookmark-4671060920920444610 2019-07-04T14:42:10Z https://b.hatena.ne.jp/amring/20190704#bookmark-4671060920920444610 2019-07-04T14:41:23Z あとで読む https://b.hatena.ne.jp/kazoo_oo/20190704#bookmark-4671060920920444610 2019-07-04T14:37:44Z https://b.hatena.ne.jp/stokiwa/20190704#bookmark-4671060920920444610 2019-07-04T14:34:41Z あとで読む https://b.hatena.ne.jp/kayamelo151515/20190704#bookmark-4671060920920444610 2019-07-04T14:32:50Z あとで読む https://b.hatena.ne.jp/session00/20190704#bookmark-4671060920920444610 2019-07-04T14:32:00Z https://b.hatena.ne.jp/inaly/20190704#bookmark-4671060920920444610 2019-07-04T14:25:06Z https://b.hatena.ne.jp/chankuri/20190704#bookmark-4671060920920444610 2019-07-04T14:20:42Z あとで読む https://b.hatena.ne.jp/ymdicr0101/20190704#bookmark-4671060920920444610 2019-07-04T14:19:32Z https://b.hatena.ne.jp/wushi/20190704#bookmark-4671060920920444610 2019-07-04T14:19:02Z あとで読む https://b.hatena.ne.jp/kf0027/20190704#bookmark-4671060920920444610 2019-07-04T14:14:43Z https://b.hatena.ne.jp/cl-gaku/20190704#bookmark-4671060920920444610 なるほど隣接 2019-07-04T14:13:33Z あとで読む https://b.hatena.ne.jp/advancive61/20190704#bookmark-4671060920920444610 2019-07-04T13:45:01Z https://b.hatena.ne.jp/Akineko/20190704#bookmark-4671060920920444610 2019-07-04T13:44:05Z *css https://b.hatena.ne.jp/yancy1969/20190704#bookmark-4671060920920444610 2019-07-04T13:43:08Z あとで読む https://b.hatena.ne.jp/entryno001/20190704#bookmark-4671060920920444610 2019-07-04T13:38:05Z web制作 https://b.hatena.ne.jp/redlo/20190704#bookmark-4671060920920444610 2019-07-04T13:34:27Z css https://b.hatena.ne.jp/ratovia/20190704#bookmark-4671060920920444610 2019-07-04T13:31:39Z https://b.hatena.ne.jp/nbinbi/20190704#bookmark-4671060920920444610 2019-07-04T13:30:10Z https://b.hatena.ne.jp/esocchi/20190704#bookmark-4671060920920444610 2019-07-04T13:29:33Z