0

0

css细节复习笔记--内边距、边框和外边距_html/css_WEB-ITnose

php中文网

php中文网

发布时间:2016-06-24 11:46:58

|

2085人浏览过

|

来源于php中文网

原创

一个元素的内边距、边框和外边距属性会影响着整个文档如何布局,更重要的是,它们会严重影响给定元素的外观。

高度和宽度

这两个属性不能应用到行内非替换元素,其高度和宽度由链接的内容确定,而不是由创作人员确定。正常流中的元素很少有设定的高度。

外边距和内边距

如果元素有背景,则会影响使用内边距和外边距,因为背景会延伸到内边距中,但不会延伸到外边距。为元素指定的内边距和外边距会影响元素的背景何时结束。

立即学习前端免费学习笔记(深入)”;

为内容区的个边增加10像素空白,margin:10px,类似于html的hspace和vspace,设置一个图像周围的额外空间。margin遵循一下模式:

margin:top right bottom left。这些值自上而下围着元素顺时针旋转,如果想呈现你想要的效果,就必须正确安排值的顺序。当其中一个值缺省的时候,将会按照以下规则:

1)如果缺少左外边距的值,则使用右外边距的值。

2)如果缺少下外边距的值,则使用上外边距的值。

3)如果缺少右外边距的值,则使用上外边距的值。

换句话说,如果为外边距指定3个值,则第4个值将会从第2个复制得到。如果给定两个值,第4个值会从第2个值复制得到,第3个值会从第1个值得到。

单边外距属性,对于margin:auto auto auto 3em;等同于margin-left:3em;可以使用单一的margin-top、margin-right、margin-bottom和margin-left单一设置外边距。

上小节讨论过”负外边距和合并外边距“的规则:正常流中垂直相邻块级元素外边距会合并。但是当外边距应用到行内非替换元素,她对行高没有任何影响。由于外边距实际上是透明的,所以这个声明没有任何视觉效果,原因在于行内非替换元素的外边距不会改变一个元素的行高。

但是注意,行内非替换元素之前的字的结尾与行内元素背景的边界之间有额外的一个空间。如果愿意可以在行内元素的两端都增加这个额外的空间:

<p style="font-size:12px;line-height:14px;"> This is text<em>some of which emphasized</em>,plus other text<br>which id <strong style ="margin:25px;background:silver">strongly emphasized</strong>and which is<br>larger than the surrounding text. </p>

效果如下:

行者AI
行者AI

行者AI绘图创作,唤醒新的灵感,创造更多可能

下载

如果向行内非替换元素应用负外边距,情况会更有意思。元素的上下外边距不受影响,行高也不会受影响,不过元素的左右两端可能与其他内容重叠。

替换元素有所不同:为替换元素设置的外边距确实会影响行高,可能会使行高增加或减少,这取决于上下外边距的值。行内替换元素的左右外边距与替换元素的左右外边距的作用一样。

 

边框

每个边框都有3个方面:其宽度或粗细、其样式或外观,以及其颜色。边框的默认样式是none,不一定能看到边框。默认的边框颜色是元素本身的前景色,如果没有为边框声明颜色,它将与元素文本颜色相同。

边框的样式

如果一个边框没有样式,就要没有宽度,不过有些情况下你可能向创建一个不可见的边框。这就引入了边框颜色transparent,这个值用于创建有宽度的不可见边框。这种透明边框相当于内边距,因此元素的背景会延伸到边框区(假设有可见的背景)。

百分数值和内边距

可以为元素的内边距设置百分数值。向外边距一样,百分数值要相对于其父元素的width计算,所以如果父元素的width改变,它们也会改变。

注意,上下内边距与左右内边距一直;也就是说,上下内边距会相对于父元素的宽度计算,而不是相对于高度。

相关文章

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
Golang 并发编程模型与工程实践:从语言特性到系统性能
Golang 并发编程模型与工程实践:从语言特性到系统性能

本专题系统讲解 Golang 并发编程模型,从语言级特性出发,深入理解 goroutine、channel 与调度机制。结合工程实践,分析并发设计模式、性能瓶颈与资源控制策略,帮助将并发能力有效转化为稳定、可扩展的系统性能优势。

2

2026.02.27

Golang 高级特性与最佳实践:提升代码艺术
Golang 高级特性与最佳实践:提升代码艺术

本专题深入剖析 Golang 的高级特性与工程级最佳实践,涵盖并发模型、内存管理、接口设计与错误处理策略。通过真实场景与代码对比,引导从“可运行”走向“高质量”,帮助构建高性能、可扩展、易维护的优雅 Go 代码体系。

1

2026.02.27

Golang 测试与调试专题:确保代码可靠性
Golang 测试与调试专题:确保代码可靠性

本专题聚焦 Golang 的测试与调试体系,系统讲解单元测试、表驱动测试、基准测试与覆盖率分析方法,并深入剖析调试工具与常见问题定位思路。通过实践示例,引导建立可验证、可回归的工程习惯,从而持续提升代码可靠性与可维护性。

0

2026.02.27

漫蛙app官网链接入口
漫蛙app官网链接入口

漫蛙App官网提供多条稳定入口,包括 https://manwa.me、https

56

2026.02.27

deepseek在线提问
deepseek在线提问

本合集汇总了DeepSeek在线提问技巧与免登录使用入口,助你快速上手AI对话、写作、分析等功能。阅读专题下面的文章了解更多详细内容。

4

2026.02.27

AO3官网直接进入
AO3官网直接进入

AO3官网最新入口合集,汇总2026年可用官方及镜像链接,助你快速稳定访问Archive of Our Own平台。阅读专题下面的文章了解更多详细内容。

53

2026.02.27

php框架基础教程
php框架基础教程

本合集涵盖2026年最新PHP框架入门知识与基础教程,适合初学者快速掌握主流框架核心概念与使用方法。阅读专题下面的文章了解更多详细内容。

1

2026.02.27

php框架怎么用
php框架怎么用

本合集专为零基础学习者打造,系统介绍主流PHP框架的安装、配置与基础用法,助你快速入门Web开发。阅读专题下面的文章了解更多详细内容。

4

2026.02.27

无禁词AI聊天软件下载大全
无禁词AI聊天软件下载大全

本合集精选多款免费、无违禁词限制的AI聊天软件,支持自定义角色、剧情畅聊,体验真实互动感。阅读专题下面的文章了解更多详细内容。

19

2026.02.27

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号