为啥没有inner div margin-right 和outer div padding-right?

Posted

技术标签:

【中文标题】为啥没有inner div margin-right 和outer div padding-right?【英文标题】:Why there is no inner div margin-right and outer div padding-right?为什么没有inner div margin-right 和outer div padding-right? 【发布时间】:2014-09-06 19:51:40 【问题描述】:

一个大的内部 div 在一个小的外部 div 中,外部 div 溢出-自动。 但是为什么没有inner div margin-right 和outer div padding-right?

html

<div class="outer">
    <div class="inner"></div>
</div>    

css

.outer 
    width: 100px;
    height: 100px;
    padding: 50px;
    overflow: auto;
    background: #ccc;

.inner 
    width: 150px;
    height: 150px;
    margin: 50px;
    background: red;

fiddle


好吧,问一个好问题并不容易。 (1)外层div的宽高可变,最大为屏幕。 (2)内部div的宽高是固定的,但总是大于外部div (3)我只希望内部div看起来像中心和一些像素来显示内部div box-shadow,但是没有inner div margin-right和outer div padding-right,所以我们看不到inner div right box-shadow


我只是明白了。
.inner 
    display: inline-block; /*this does work*/
    width: 150px;
    height: 150px;
    margin: 50px;
    background: red;

只需设置inner div display = inline-block。谁能告诉我为什么?

【问题讨论】:

你在哪里设置边距和内边距? 因为内部 div 中可能不需要填充/边距...取决于您的额外代码是什么样的 @florin.prisecariu 正如我所提到的,我只需要一些像素来显示内部 div 框阴影,然后内部 div 可以看起来像中心 【参考方案1】:

您看不到右边距,因为外部 div 比内部 div 小

检查http://jsfiddle.net/tNKhk/1/

我扩大了外部的div

.outer 
    width: 250px;
    height: 250px;

【讨论】:

zh,我不能那样做,可能内部 div 宽度 = 2000px,高度 = 2000px。它超出了屏幕。【参考方案2】:

把你的css改成

    .outer 
    width: 100px;
    height: 100px;
    padding: 50px;
    overflow: auto;
    background: #ccc;

.inner 
    width: 150px;
    height: 150px;
    margin: -25px;
    background: red;

【讨论】:

抱歉,还是不行。而且看起来很奇怪。你可以在 jsfiddle 上试试。但我得到了答案,只需设置 inner div display = inline-block.但我不知道为什么

以上是关于为啥没有inner div margin-right 和outer div padding-right?的主要内容,如果未能解决你的问题,请参考以下文章

如何在 ionic v4 中的 item-native div 中编辑“item-inner”类?

使 div 适合剩余高度

为啥这个使用 INNER JOIN 的 SQL DELETE 查询不起作用? [复制]

W3SCHOOL上为啥没有DIV教程?只看到了CSS教程,没有DIV教程.为啥???????

为啥背景图片没有填满整个div

为啥标签没有被包裹在 div 中? [复制]