margin-right无效问题简析

我们都知道盒子模型的组成，外边距，内边距，内容区，和边框，在css样式中一般通过margin-left和margin-top控制盒子的向右和向下移动，可是每当在css样式中添加margin-right样式往往不会生效，这又是为什么呢？今天我们来详细说说这个问题。

在了解这个问题之前，我们先要了解一下css中的过渡约束问题，所谓过渡约束问题，是浏览器所限定的，元素在其父元素中水平方向的位置由以下几个属性共同决定：

margin-left + border-left + padding-left + width + padding-right + border-right + margin-right= 父元素内容区宽度

如图所示：

如果不满足这个公式的话，浏览会自动的调整相应的宽度来匹配它，其中优先调整的是没有定义到的值，例如下列代码：

<style>.out-box{width: 300px;height: 300px;background-color: pink;}.inner-box{width: 100px;height: 100px;background-color: yellow;border: 1px solid;margin-left:20px;padding: 20px;}
</style><div class="out-box"><div class="inner-box"></div></div>

图片：

此时我们没有设置margin-right，所以盒子的右外边距便会被浏览器自动计算，值就是300-40-2-100 -20 = 138px ，这也是为什么我们在css中设置样式时盒子会相应移动的原因，浏览器会自动调整相应的宽度，可是浏览器中给 margin-right默认设置了auto属性，因此子盒子的设置都是从左上开始的，这也是我们对css中的margin-right设置宽度无效的原因。

margin-right无效问题简析相关推荐

Spring Boot源码简析 @EnableTransactionManagement
相关阅读 Spring Boot源码简析事务管理 Spring Boot源码简析 @EnableAspectJAutoProxy Spring Boot源码简析 @EnableAsync Sprin ...
精益质量管理简析(转载)
精益质量管理简析(转载) 精益质量管理简析 http://www.quality-world.cn/guanli/2741.html 精益质量管理就是在对关键质量数据的定量化分析基础上,综合运用多种知 ...
简析穷举算法，及其简单应用
简析穷举算法,及其简单应用穷举概述穷举法又称列举法,其基本思想是逐一列举问题所涉及的所有情况. 穷举法常用于解决"是否存在"或"有多少种可能"等问题. 应用 ...
Learning with Noisy Correspondence for Cross-modal Matching 文献翻译代码简析
Learning with Noisy Correspondence for Cross-modal Matching 基于噪声对应的跨模态匹配学习 Learning with Noisy Corre ...
ICDE-2020 论文简析:依赖感知空间众包中的任务分配 - Task Allocation in Dependency-aware Spatial Crowdsourcing
ICDE-2020 论文简析:依赖感知空间众包中的任务分配 - Task Allocation in Dependency-aware Spatial Crowdsourcing 研究背景研究目标 ...
dhcp协议服务器端默认通信端口是,DHCP协议简析
不知道看官大人是否有过这样的疑惑?一台计算机,插上网线是不是就可以直接上网了呢?其实没有这么简单,需要配置本机IP地址.子网IP地址.网关IP地址和DNS地址等.配置有两种方式,一种是手动配置,采用静 ...
浅谈跨网站脚本攻击(XSS)的手段与防范(简析新浪微博XSS攻击事件)
本文主要涉及内容: 什么是XSS XSS攻击手段和目的 XSS的防范新浪微博攻击事件什么是XSS 跨网站脚本(Cross-sitescripting,通常简称为XSS或跨站脚本或跨站脚本攻击)是一 ...
PHP+新浪微博开放平台+新浪云平台（SAE）开发微博应用——PHP SDK中Demo程序简析
PHP+新浪微博开放平台+新浪云平台(SAE) --新浪微博应用开发的一个解决方案一.PHP+新浪微博开放平台+新浪云平台(SAE)方案的基础二.建立微博应用的过程三.PHP SDK中Demo程 ...
【Golang源码分析】Go Web常用程序包gorilla/mux的使用与源码简析
目录[阅读时间:约10分钟] 一.概述二.对比: gorilla/mux与net/http DefaultServeMux 三.简单使用四.源码简析 1.NewRouter函数 2.HandleF ...

margin-right无效问题简析

margin-right无效问题简析相关推荐

最新文章

热门文章