iT邦幫忙

1

正在學 CSS 但遇到一個問題 關於margin

https://ithelp.ithome.com.tw/upload/images/20200926/20131053XpuoaCHLNW.jpg
https://ithelp.ithome.com.tw/upload/images/20200926/2013105384fhh3AUEJ.png
https://ithelp.ithome.com.tw/upload/images/20200927/20131053j7gAcWdbSr.png

<BODY>
  <div style="width:130px;height:130px;background-color:#D4E6F8;">
 <div style="background-color:#FFC991;width:80px;height:80px;margin:5px 10px 15px 20px"></div>
  </div>
  
  <div style="width:130px;height:130px;background-color:#D4E6F8;">
  <div style="background-color:#FFC991;width:80px;height:80px;margin:5px 10px 15px 20px"></div>
  </div>
  
 </BODY>

正在學習使用 CSS的margin
但是我跟範例打的一樣 顯示出來卻不一樣,複製範例過來就沒問題,自己手打卻不行。
不好意思 謝謝各位

jrnalts iT邦新手 5 級 ‧ 2020-09-27 00:42:51 檢舉
會不會是沒有 css reset 呢?
因為大多數瀏覽器都會有預設樣式,譬如 margin, padding, h1~h6 的 font-size 之類的... 可以先 reset 再檢查看看 :)
看到圖片就懶的看了。跳過。
a3754 iT邦新手 5 級 ‧ 2020-09-27 15:11:51 檢舉
謝謝各位!
8
CSScoke
iT邦新手 4 級 ‧ 2020-09-27 00:44:58

不建議在子物件使用margin來處理上下的距離,因為很容易發生父層margin塌陷問題(就是父層吃到子層的margin的意思)
建議你可以在父層使用padding來取代子層的margin會更好

a3754 iT邦新手 5 級 ‧ 2020-09-27 15:11:29 檢舉

謝謝

0
小魚
iT邦大師 1 級 ‧ 2020-09-27 07:54:54

如果要貼程式碼,
麻煩請貼文字不要貼圖片,
要貼圖片也可以,
另外加上文字的部分,
然後用兩個```把程式碼包起來.
就會像下面這樣

<div>
這是測試
</div>
a3754 iT邦新手 5 級 ‧ 2020-09-27 15:11:36 檢舉

好的 謝謝!

0
skyksl066
iT邦新手 5 級 ‧ 2020-09-27 10:16:23

我看你參考的網站
https://www.wibibi.com/info.php?tid=110

網站原始碼提供的原始碼在父層div裡面有包了2個符號
另外那個網站的範例不好,因為子層的margin已經吃到外面去了。
https://ithelp.ithome.com.tw/upload/images/20200927/20130943l9b7GZO5dK.png

<div style="width:130px;height:130px;background-color:#D4E6F8;">因為這邊有2個符號
 <div style="background-color:#FFC991;width:80px;height:80px;margin:5px 10px 15px 20px"></div>
</div>

如果真的要這樣用建議用法

<div style="position:relative;width:130px;height:130px;background-color:#D4E6F8;">
    <div style="position:absolute;background-color:#FFC991;width:80px;height:80px;margin:5px 10px 15px 20px"></div>
</div>
a3754 iT邦新手 5 級 ‧ 2020-09-27 15:11:18 檢舉

謝謝

0
海綿寶寶
iT邦大神 1 級 ‧ 2020-09-27 17:34:58

因為複製過來的有不可見字元(換列),所以跟你自己手打的不一樣

如果你檢視該網頁的原始檔
就會看到其實你複製的是

<div style="width:130px;height:130px;background-color:#D4E6F8;"><br> <div style="background-color:#FFC991;width:80px;height:80px;margin:5px 10px 15px 20px"></div><br></div>

註:上面的原始碼,其中的 & gt; &lt ; 都被轉碼轉掉了
還有一個 <br>
就是那個 <br> 造成結果不一樣

另外,點這裡是我這次鐵人賽唯一的一篇文章,喜歡的話左上角點 Like

請按讚 追蹤 分享 /images/emoticon/emoticon37.gif

a3754 iT邦新手 5 級 ‧ 2020-09-28 11:51:39 檢舉

謝謝

0
dj584
iT邦新手 5 級 ‧ 2020-10-14 19:33:57

最近也遇到相同的問題
可以參考以下的說明
https://wcc723.github.io/css/2016/06/08/css-margin-collapsing/

我要發表回答

立即登入回答