margin-right - 右外边距 - css 外边距

百变鹏仔1年前 (2023-11-21)阅读数 19#技术干货

margin-right

margin-right属性设置与元素相关联的盒子模型的右外边距。这个值可以为负值。竖直排列相邻的两个盒子模型的外边距会重叠，称为外边距重叠

示例

/*  values */
margin-right: 20px;        /* an absolute length */
margin-right: 1em;         /* a length relative to the text size */
margin-right: 5%;          /* a margin relative to the nearest block container's width */

/* keyword values */
margin-right: auto;

/* global values */
margin-right: inherit;
margin-right: initial;
margin-right: unset;

浏览器支持


浏览器都支持`margin-right`

语法

margin-right:| | auto

取值：

：一个固定宽度值：可以是一个绝对宽度，单位px，也可以是一个相对宽度，单位code>em,或者相对视窗的大小，单位vh。
：以百分比为单位的margin值，计算时是相对于其最近的父级容器的宽度。
auto：水平（默认）书写模式下，其计算值取决于可用空间

auto：关键词表示在当前布局模式下，浏览器根据接收的左边距自动计算出外边距。如果有几组margin-left和margin-right设置为auto，那么最后计算的空间分布，会根据display，float，position属性，自动生成以下几种情况：

`display`值	`float`值	`position`值	计算`auto`	说明
`inline`,`inline-block`,`inline-table`	any	`static`or`relative`	`0`	Inline layout mode
`block`,`inline`,`inline-block`,`block`,`table`,`inline-table`,`list-item`,`table-caption`	any	`static`or`relative`	`0`, except if both`margin-left`and`margin-right`are set to`auto`. In this case, it is set to the value centering the element inside its parent.	Block layout mode
`block`,`inline`,`inline-block`,`block`,`table`,`inline-table`,`list-item`,`table-caption`	`left`or`right`	`static`or`relative`	`0`	Block layout mode(floating element)
any`table-`,except*`table-caption`	any	any	`0`	Internal`table-*`elements don't have margins,use`border-spacing`instead
any,except`flex`,`inline-flex`,or`table-*`	any	`fixed`or`absolute`	`0`, except if both`margin-left`and`margin-right`are set to`auto`. In this case, it is set to the value centering the border area inside the available`width`, if fixed.	Absolutely positioned layout mode
`flex`,`inline-flex`	any	any	`0`, except if there is any positive horizontal free space. In this case, it is evenly distributed to all horizontal`auto`margins.	Flexbox layout mode

初始值	0
适用于	所有元素，除非 table \| inline-table \| table-caption 的表格类元素之外
继承性	无
动画性	是
计算值	指定的百分比、绝对长度或auto

实例

.content { margin-right: 5%; }
.sidebox { margin-right: 10px; }
.logo    { margin-right: -5px; }

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com

免责声明：我们致力于保护作者版权，注重分享，当前被刊用文章因无法核实真实出处，未能及时与作者取得联系，或有版权异议的，请联系管理员，我们会立即处理! 部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理!邮箱：344225443@qq.com)

图片声明：本站部分配图来自网络。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!

内容声明：本文中引用的各种信息及资料（包括但不限于文字、数据、图表及超链接等）均来源于该信息及资料的相关主体（包括但不限于公司、媒体、协会等机构）的官方网站或公开发表的信息。部分内容参考包括:(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供参考使用,不准确地方联系删除处理！本站为非盈利性质站点,本着为中国教育事业出一份力,发布内容不收取任何费用也不接任何广告!)