[问题] CSS padding的问题(初心者)

楼主: FakeLusiwa (born to be free)   2016-12-06 00:29:03
各位好。
不好意思我完全是自学初学,问题很笨还请多多包涵。
前阵子用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。
如果我想要右边的余白配合我这段文字的结束之处,该如何处理呢?
不好意思可能连基本概念都有不清的部分,谢谢大家。
作者: MangoTW (不在线上)   2016-12-06 00:47:00
块型元素者,子宽从父宽。
作者: iamnodoubt (Have Fun)   2016-12-06 01:16:00
有inline, inline-block跟block类型的元素,去研究一下他们有什么特性,哪些tag是属于那一类,有时觉得一些初阶的教学或是课程都不教devtools,从devtools去了解元素有哪些行为特性简单很多,而且做相关工作根本是必备的技能..
作者: sa0124 ((恩恩))   2016-12-06 09:43:00
妳是不是搞混了@@?妳说的那个“看不见的框框” 没有很长啊~就是紧贴著字的一个框框 然后因为字太短了 所以他只能符合上下左的70px 右边就管不到了 妳如果要撑开那个“看不见的框框” 要用margin
楼主: FakeLusiwa (born to be free)   2016-12-06 12:31:00
非常感谢各位的解答,看来是我还没理解行内和区块元素的特性,所以以为p的宽度会配合我的右padding

Links booklink

Contact Us: admin [ a t ] ucptt.com