CSS-盒模型Border padding margin

最新推荐文章于 2022-01-27 21:06:02 发布
最新推荐文章于 2022-01-27 21:06:02 发布
阅读量196 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 前端 文章标签： 前端 盒模型
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/slyslyme/article/details/80436158
本文详细介绍了CSS中的边框、内边距及外边距属性，包括它们如何影响元素的尺寸和布局，解释了外边距合并现象，并给出了避免该现象的方法。此外，还介绍了box-sizing属性的作用及其不同取值对元素尺寸的影响。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1、 border:边框的宽度 样式 颜色；

方向为：上右下左

连写时样式不能省略

2、内边距属性

边框与内容之间的距离

给标签设置内边距之后，标签占有的宽度和高度也会发生变化,设置内边距后会有背景颜色


3、外边距属性margin

标签和标签之间的距离就是外边距，没有背景颜色

  • 外边距合并现象

  • 默认布局的垂直方向上外边距是不会叠加的, 会出现合并现象, 谁的外边距比较大就听谁的

  • 关于margin-top问题:原因根据W3C盒子模型的规范，一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。

  • 解决方式最常用的：给父盒子加border  或者给父盒子添加padding-top

4. box-sizing属性
这个属性可以保证我们给盒子新增padding和border之后, 盒子元素的宽度和高度不变
box-sizing取值
content-box（和不加相同）
元素的宽高 = 边框 + 内边距 + 内容宽高
border-box（进行自动调整 width 和 height 不变）
元素的宽高 = width/height的宽高
增加padding和border之后要想保证盒子元素的宽高不变, 系统会自动减去一部分内容的宽度和高度



                

        

    

    
  



    



                



	

		

			

				
					
前端CSS基础8（盒子模型（margin、border、padding、content））

				
			

			

				

					qq_51752841的博客
				

				

					04-23
					
					1290
					
				

			

		

		

			
				
盒子模型（margin、border、padding、content）

			
		

	



                

            
              



	

		

			

				
					
09_盒子模型-padding和margin对比.html

				
			

			

				

					10-09
				

			

		

		

			
				
盒子模型（Box Model）是Web页面布局的基础，它规定了元素框处理元素内容（content）、内边距（padding）、边框（border）和外边距（margin）的方式。  内容（Content）是盒子模型中的最内层部分，也就是实际的文本...

			
		

	



              


  
              

                


	

		

			

				
					
CSS padding margin border属性详解

				
			

			

				

					weixin_33965305的博客
				

				

					02-19
					
					485
					
				

			

		

		

			
				
图解CSS padding、margin、border属性W3C组织建议把所有网页上的对像都放在一个盒(box)中，设计师可以通过创建定义来控制这个盒的属性，这些对像包括段落、列表、标题、图片以及层。盒模型主要定义四个区域：内容(content)、内边距(padding)、边框(border)和外边距(margin)。对于初学者，经常会搞不清楚margin，background-color，bac...

			
		

	





	

		

			

				
					
CSS中 padding 、margin两个重要属性的详细介绍及举例说明

				
			

			

				

					
				

				

					09-09
					
					1640
					
				

			

		

		

			
				
本文将讲述HTML和CSS的关键—盒子模型(Box model). 理解Box model的关键便是margin和padding属性, 而正确理解这两个属性也是学习用css布局的关键.注: 为什么不翻译margin和padding? 原因一, 在汉语中并没有与之相对应的词语; 原因二: 即使有这样的词语, 由于在编写css代码时, 必须使用margin和padding, 如果我们总用汉语词语代

			
		

	



		

			
		



	

		

			

				
					
CSS中的padding border margin

				
			

			

				

					liubangbo的专栏
				

				

					01-03
					
					283
					
				

			

		

		

			
				
Css的盒子模型是比较重要的一个概念，在画页面布局时是基础，下面就通过一个小例子看下这个概念。




#div1 {
    width: 300px;
    height: 200px;
    background: #4cb6ff;
    padding: 0 80px 0 20px;
    border: 5px solid;
    border-color: #ff5f38;...

			
		

	





	

		

			

				
					
css的border margin padding属性

				
			

			

				

					不起眼的小学生
				

				

					12-07
					
					675
					
				

			

		

		

			
				
前言

盒子模型，英文即box model。无论是div、span、还是a都是盒子。

但是，图片、表单元素一律看作是文本，它们并不是盒子。这个很好理解，比如说，一张图片里并不能放东西，它自己就是自己的内容。

css的border属性可以用来定义样式

border-style属性用来定义边框的样式

为边框指定宽度(border-width)有两种方法：可以指定长度值，比如 2px 或 0.1...

			
		

	





	

		

			

				
					
css盒子模型

				
			

			

				

					sunshi_ne的博客
				

				

					05-31
					
					508
					
				

			

		

		

			
				
虽然知道盒子模型，但让我用语言解释出来，还不知道从何说起。今天就来好好的看看这个盒子模型。盒模型是作为前端页面布局的一个基础也是很重要的一个部分，因此了解它是最基本的。盒状模型是CSS中重要的概念。虽然CSS中没有盒状模型这个属性，但它却是CSS中无处不在的，盒装模型是由margin、border、padding和content几个属性组合形成的。说通俗一点就和我们日常生活中的箱子一样，所以我们叫

			
		

	





	

		

			

				
					
html的CSS-盒模型资源包

					
最新发布

				
			

			

				

					11-09
				

			

		

		

			
				
盒模型包括四个部分：内容区(content)、内填充(padding)、边框(border)和外边距(margin)。通过掌握盒模型的相关知识，开发者可以更好地控制页面布局和元素之间的空间关系。  1. 内容区(content)是盒子的最主要部分，...

			
		

	





	

		

			

				
					
Day05-CSS布局-盒子模型

				
			

			

				

					07-06
				

			

		

		

			
				
- `margin-top`, `margin-right`, `margin-bottom`, `margin-left`：分别设置外边距的各个方向。  盒子模型对布局的影响主要体现在元素间的空间关系。通过调整内边距和外边距，我们可以改变元素的相对位置，创建各种...

			
		

	





	

		

			

				
					
day05（CSS03-盒子模型）v1.0.pdf

				
			

			

				

					02-17
				

			

		

		

			
				
"CSS盒子模型和三大特性"  CSS盒子模型是一个基本的布局模型，它由内容区域、边框区域、内边距区域和外边距区域组成。在这个模型中，每个标签都是一个盒子，通过盒子的视角可以更方便地进行布局。  一、CSS三大特性 ...

			
		

	





	

		

			

				
					
盒模型（Boxmodel）

				
			

			

				

					羊羊羊羊羊羊羊的博客
				

				

					01-14
					
					2333
					
				

			

		

		

			
				
盒模型


知识点


理解W3C标准盒模型


理解并掌握盒模型相关属性的使用方法


了解CSS盒模型的浏览器兼容性


掌握浮动布局的设计与使用方法


掌握各种页面元素的定位方法


掌握CSS3新增的相关属性的使用方法及兼容性




一、W3C标准盒模型
1、什么是盒模型
盒模型是使用css对网页元素进行控制时的一个概念，浏览器把网页中的每一个元素都看作一个盒模型，每个盒模型都由以下几...

			
		

	





	

		

			

				
					
css 的基础样式--border--padding--margin

				
			

			

				

					weixin_30840573的博客
				

				

					01-19
					
					195
					
				

			

		

		

			
				
border 边框复合写法 border:border-width border-style border-color;border-width 边框宽度 border-style 边框样式：solid实线 dashed虚线 dotted点线 (点线 IE6不认)border-color 边框颜色：英文单词/十六进制/rgbborder-width还能再细分为boder-top-width    ...

			
		

	





	

		

			

				
					
05border-padding总结

				
			

			

				

					IT小多的博客
				

				

					08-25
					
					402
					
				

			

		

		

			
				
border：
border表示边框属性
border-width 边框尺寸
border-style  边框的形状 solid实线 dashed虚线 dotted 点线 double 双线
border-color 
注意：
1.可指定方向 border-left分别为上左下右四个方向指定属性
2.点线在IE6中是不兼容的，另外这些线的形态在不同浏览器显示有细微差别


当d

			
		

	





	

		

			

				
					
边框的属性margin border padding详解

				
			

			

				

					风雨无阻
				

				

					07-26
					
					3039
					
				

			

		

		

			
				


 

以div框为例     框的外边用margin调节与其他元素的间距     内部用padding调节与边框的间距             border用来设置框边线 的style 包括线的粗细，线的风格颜色透明度等...

			
		

	





	

		

			

				
					
CSS盒子模型(border、padding、margin设置)、行内块或行内元素水平居中、去除li小圆点、圆角、盒子阴影、文字阴影、透明度

				
			

			

				

					Bulut0907
				

				

					01-27
					
					6190
					
				

			

		

		

			
				
目录1. 盒子模型的组成1. border边框1.1 border-collapse: collapse2. padding
1. 盒子模型的组成

1. border边框
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>test title</title>

    <style>

        div {

			
		

	





	

		

			

				
					
如何设置是否将padding、border、margin的值算入width和 height里面

				
			

			

				

					qq_42617840的博客
				

				

					11-10
					
					2755
					
				

			

		

		

			
				
使用box-sizing属性

box-sizing:border-box

设置box-sizing:border-box后，就会将padding、border、margin的值算入width和 height里面去了，使得 总元素的宽度 = width的值 、总元素的高度 = height。



box-sizing: content-box

其实就是默认的，将padding、border、margin的值不 算入width和 height里面去。



box-sizing: inherit

继.

			
		

	





	

		

			

				
					
从box-sizing:border-box属性入手，来了解盒模型

				
			

			

				

					TwcatL_tree
				

				

					01-20
					
					5887
					
				

			

		

		

			
				
    从最开始学习CSS的时候，就了解了盒模型的概念，今天，我们从其中的box-sizing:border-box;的属性入手，来重新认识一下盒模型在实际项目中的运用。 
    背景：先声明一下运用的场景，假如项目布局使用的是自适应的布局方式，div给出的宽度是百分比的形式，即框占窗口宽度的50%，但边界和内边距是用像素来表示的怎么办？为了避免这种问题...

			
		

	





	

		

			

				
					
深入理解CSS盒子模型

				
			

			

				

					知识点沉淀包括不限于前端
				

				

					05-17
					
					394
					
				

			

		

		

			
				
深入理解盒子模型

1.盒子模型的初步了解

盒尺寸中的4个盒子 content-box、padding-box、border-box和margin-box分别对应CSS世界中的centent、padding、border、margin属性，这四个属性称为”盒尺寸四大家族”;

width 宽度
height 高度
padding 内填充
border 边框线
margin 外间距




2.盒子模型分类及计算公式


盒模型有两种，分别是ie盒子模型（IE6以下版本浏览器)和标准w3c盒子模型；
能影响

			
		

	





	

		

			

				
					
【CSS】padding,border,margin与width宽度的关系

					
热门推荐

				
			

			

				

					编程记录，亲测有效
				

				

					09-23
					
					2万+
					
				

			

		

		

			
				
padding,border,margin这三样东西不算难，算是在CSS中老生常谈的东西，但是要注意其对width的影响，
直接上一段极其简单的代码：


    
        margin_border_padding_and_width
    
    
        Div的实际宽度：px
        Div的含边线的宽度：px
        ssssssssss
    

			
		

	





	

		

			

				
					
CSS盒模型详解：padding、border、outline与margin

				
			

			

				

					
				

			

		

		

			
				
CSS盒模型（CSS Box Model）是讨论这些概念的基础，它将HTML元素视为一个矩形盒子，由内容区域（Content）、内边距区域（Padding）、边框区域（Border）和外边距区域（Margin）组成。每个部分都有其特定的作用：  1....

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值