在DIV内填充

时间:2016-01-06 12:19:45

标签: html css html5 css3

为什么添加一些填充会影响DIV框外的元素?填充不应该在DIV的边框和内容内部之间创建一些空间吗?如何创建此空间而不影响DIv框外的元素?

3 个答案:

答案 0 :(得分:6)

  

如何在不影响外部元素的情况下创建此空间   DIv盒子?

使用box-sizing: border-box

来自MDN

  

边界框   宽度和高度属性包括填充和   边界,但不是边际。

必须设置此属性的原因是默认情况下box-sizing的值为content-box。再次来自MDN:

  

content-box 这是CSS标准指定的默认样式。仅测量宽度和高度属性   内容,但不是填充,边框或边距。

答案 1 :(得分:1)

假设您已指定内容heightwidth,则padding放置在周围。这使边界向外移动。这会将利润向外移动。这推动了附近的元素。

您可以通过缩小height和/或width进行补偿来改变它,或者使用box-sizing属性来heightwidth来确定边框外边缘之间的距离,而不是内容的外边缘。

答案 2 :(得分:1)

尝试查看function evpcopy { begin { #Recommended options $switchNP = "/NP" #No Progress - don't display percentage copied #Copy options $switchMIR = "/MIR" #MIRror a directory tree (equivalent to /E plus /PURGE) $switchR = "/R:3" #number of Retries on failed copies: default 1 million $switchW = "/W:1" #Wait time between retries: default is 30 seconds $sourcePath = '\\sourceServer\d$\EVP' $targetPath = '\\targetServer\d$\EVP' #Log File Function $InputLogFile = 'D:\logs' if (!(Test-Path -Path $InputLogFile)) { Write-EventLog -LogName Application -source EvpScript -EventId 1234 -message "path $InputLogFile doesn't exist! `n" } $logfile = $InputLogFile + "\" + ((Get-Date).ToString('yyyy-MM-dd')) + "_" + $sourcePath.Split('\')[-1].Replace(" ", "_") + ".txt" $switchlogfile = "/TEE", "/LOG+:$logfile" } process { $run = robocopy.exe $sourcePath $targetPath $switchNP $switchR $switchW $switchMIR $switchlogfile | foreach { $ErrorActionPreference = "silentlycontinue" } } end {} } #end robocopy function evpcopy 属性...

https://css-tricks.com/box-sizing/

  

今天,所有浏览器的当前版本都使用原始"宽度或   高度+填充+边框=实际宽度或高度"盒子模型。同   box-sizing:border-box;,我们可以将盒子模型改为曾经的样子   " quirky"方式,元素的指定宽度和高度不是   填充或边框影响。事实证明这非常有用   响应式设计,它已经进入重置样式。

您之后的价值是box-sizing

border-box
相关问题