当一个元素margin:20px;padding:20px;border:0;求盒子实际大小
时间: 2023-03-19 22:21:29 浏览: 121
当一个元素设置了margin:20px; padding:20px; border:0; 时,求盒子实际大小。
实际上,盒子实际大小由元素的内容宽度、内容高度、padding、border和margin共同决定。
因为该元素的border和padding属性都设置为20px,所以它的内容框实际上比原始大小小了40px(左右各20px,上下各20px)。而元素的margin属性设置为20px,也就是说盒子在外部会占据额外的40px(左右各20px,上下各20px)。
因此,该元素的实际大小应该比其内容框宽40px和高40px,即实际大小为:内容宽度+40px,内容高度+40px。
相关问题
.container { width: 400px; height: 300px; background-color: #aaffff; border: 1px solid #ccc; margin: 0 auto; padding: 20px; }什么意思
这是一个CSS样式代码块,描述了一个名为container的元素的样式。
其中,width属性指定元素的宽度为400像素,height属性指定元素的高度为300像素,background-color属性指定元素的背景颜色为#aaffff,border属性指定元素的边框为1像素的实线边框,颜色为#ccc,margin属性指定元素的外边距为0上下,auto左右(使元素在父元素中水平居中),padding属性指定元素的内边距为20像素。
这个样式代码块可以应用于HTML文档中的任何一个类名为container的元素,使该元素具有样式中描述的宽度、高度、背景颜色、边框、外边距和内边距等属性。
body{ border: 0; margin: 0; padding: 0; color: #663366; font-size: 24px; background:#000; }
这段代码是对 body 标签应用的一些样式设置:
- border: 0; :将边框大小设置为 0 ,即不显示边框。
- margin: 0; :将外边距设置为 0 ,即不留白边。
- padding: 0; :将内边距设置为 0 ,即不留内边距。
- color: #663366; :将文本颜色设置为紫色。
- font-size: 24px; :将字体大小设置为 24 像素。
- background:#000; :将背景颜色设置为黑色。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://img-home.csdnimg.cn/images/20210720083646.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)