作者FakeLusiwa (born to be free)
看板Web_Design
標題[問題] CSS padding的問題(初心者)
時間Tue Dec 6 00:29:03 2016
各位好。
不好意思我完全是自學初學，問題很笨還請多多包涵。
前陣子用codecademy把CSS學過一輪之後，回過頭來複習還是有很多地方不懂。
boxing-model的部分不完全了解orz。
以下這個w3schools的基本padding教學最上面那個最基本的範例，
http://www.w3schools.com/css/css_padding.asp
"This element has a padding of 70px."這個我就很疑惑了。
假設這段文字是在p標籤內，我沒有指定p的寛度的話p與頁面同寛。
這時我設定p的padding為70px，為什麼只有上下左有表現出70px的余白?
右卻空了一大片感覺不只70px的余白?
我的感覺是這段文字內容(content)太短，只要我補足夠的字數頁面自然會表現給我看
右邊也是余白70px。(有一個看不見的content的框，然後他有點很長...這樣子)
但我是怎麼知道內容(content)那個看不見的框有多長?
有點饒舌了，我只是想說全部padding都設70px的話為什麼不是在這段文字結束後
也就是 "...of 70px."的那個句點後立刻往右余白70px。
我自己心中的想法是外框會自動配合我的Padding，也就是右邊框會自動縮回來與
70px.余白70px。
如果我想要右邊的余白配合我這段文字的結束之處，該如何處理呢?
不好意思可能連基本概念都有不清的部分，謝謝大家。
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 118.160.147.243
※ 文章網址: https://webptt.com/m.aspx?n=bbs/Web_Design/M.1480955347.A.BAA.html
※ 編輯: FakeLusiwa (118.160.147.243), 12/06/2016 00:41:05
1F：→ MangoTW: 塊型元素者，子寬從父寬。 12/06 00:47
2F：推 iamnodoubt: 有inline, inline-block跟block類型的元素,去研究一下 12/06 01:16
3F：→ iamnodoubt: 他們有什麼特性,哪些tag是屬於那一類,有時覺得一些初 12/06 01:16
4F：→ iamnodoubt: 階的教學或是課程都不教devtools,從devtools去了解 12/06 01:18
5F：→ iamnodoubt: 元素有哪些行為特性簡單很多,而且做相關工作根本是必 12/06 01:19
6F：→ iamnodoubt: 備的技能.. 12/06 01:19
7F：推 sa0124: 妳是不是搞混了@@？妳說的那個“看不見的框框” 沒有很長 12/06 09:43
8F：→ sa0124: 啊～就是緊貼著字的一個框框 然後因為字太短了 所以他只 12/06 09:43
9F：→ sa0124: 能符合上下左的70px 右邊就管不到了 妳如果要撐開那個“ 12/06 09:43
10F：→ sa0124: 看不見的框框” 要用margin 12/06 09:43
11F：→ FakeLusiwa: 非常感謝各位的解答，看來是我還沒理解行內和區塊元 12/06 12:31
12F：→ FakeLusiwa: 素的特性，所以以為p的寬度會配合我的右padding 12/06 12:31