div块的大小随着内边距改变

金子总会发光的 2017-12-04 04:08:39

div元素的width和height已经设置为固定值，但是当我改变padding的时候，div的大小却会改变。为什么呢，不明白究竟是怎样的。



<html>

<head>

<style type="text/css">

div

{

float:right;

width:100px;

height:70px;

margin:0 0 15px 20px;

padding:15px;

border:1px solid black;

text-align:center;

}

</style>

</head>



<body>

<div>

<img src="/i/eg_cute.gif" /><br />

CSS is fun!

</div>

<p>

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

</p>





</body>



</html>

padding为25时的情况：

padding为5时的情况：

...全文

444 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

yanghanl 2017-12-11

打赏
举报

在div中添加box-sizing:border-box;
box-sizing:content-box; 的其中一个，应该就可以了，具体哪一个我忘了。

#麻辣小龙虾# 2017-12-04

打赏
举报

盒子模型问题。

https://www.cnblogs.com/clearsky/p/5696286.html

天际的海浪 2017-12-04

打赏
举报

设置盒模型的形式可以用 ·http://css.doyoe.com/properties/user-interface/box-sizing.htm

今晚打老虎。。 2017-12-04

打赏
举报

在chrome标准盒子模型中,是使用标准盒子模型的，标准盒子模型width height是包括padding的；如果你用ie浏览器的话就是使用ie盒子模型， ie盒子模型的height倒是包括padding的。在标准盒子模型中，你若是想height width也包括padding，使用这个属性也可以达到效果： box-sizing: border-box;

天际的海浪 2017-12-04