




案例1:


案例2:

案例3:

案例4:











![]()

border 会撑大盒子尺寸
盒子尺寸 = widht / height + 边框线

案例:

细节
布局: 从外到内 :先宽高背景色,再放内容,调节内容位置,调节文字细节



![]()




![]()
外边距(margin) 同 内边距(padding) 规则一样




版心居中:
![]()


综合案例:
去掉列表的符号





布局: 从外到内 :先宽高背景色,再放内容,调节内容位置,调节文字细节





21-行内元素的内外边距问题

博客围绕前端布局展开,介绍了border会撑大盒子尺寸,盒子尺寸的计算方式。还阐述了布局思路,从外到内先设置宽高背景色,再处理内容、位置及文字细节。提及外边距和内边距规则相同、版心居中,以及去掉列表符号等内容,并给出多个案例。





案例1:


案例2:

案例3:

案例4:











![]()

border 会撑大盒子尺寸
盒子尺寸 = widht / height + 边框线

案例:

细节
布局: 从外到内 :先宽高背景色,再放内容,调节内容位置,调节文字细节



![]()




![]()
外边距(margin) 同 内边距(padding) 规则一样




版心居中:
![]()


综合案例:
去掉列表的符号





布局: 从外到内 :先宽高背景色,再放内容,调节内容位置,调节文字细节





21-行内元素的内外边距问题
