草庐IT

【CSS】盒子模型内边距 ② ( 内边距复合写法 | 代码示例 )

韩曙亮 2023-04-14 原文

文章目录





一、内边距复合写法



1、语法


盒子模型内边距 可以通过

  • padding-left 左内边距
  • padding-right 右内边距
  • padding-top 上内边距
  • padding-bottom 下内边距

进行 分别设置 , 也可以通过 padding 属性进行复合实现 ;


padding 属性值设置 : 设置 1 ~ 4 个 值 , 单位 像素 px ;

  • 设置 1 个值 : 设置 上下左右 内边距 ;
  • 设置 2 个值 : 设置 上下、左右 内边距 ;
  • 设置 3 个值 : 设置 上、左右、下 内边距 ;
  • 设置 4 个值 : 设置 上、右、下、左 内边距 ;

2、代码示例 - 设置 1 个值


padding 属性设置 1 个值 : 设置 上下左右 内边距 ;


代码示例 :

<!DOCTYPE html> 
<html lang="en">
<head>    
	<meta charset="UTF-8" /> 
    <title>内边距测试</title>
	<base target="_blank"/>
	<style type="text/css">
		div {
			width: 200px;
			height: 200px;
			
			/* 设置边框 */
			border: 1px solid blue;
			
			/* 设置 上下左右 内边距 20px */
			padding: 20px;
		}
	</style>
</head>
<body>
	<div>内边距测试</div>
</body>
</html>

展示效果 : 由 200 x 200 像素 变为 240 x 240 像素 ;

使用标尺进行测量 :

  • 盒子边框 宽度 240 像素 :

  • 盒子边框 高度 240 像素 :

在浏览器中 , 按下 F12 进入调试模式 ;

使用 选择工具 , 将鼠标移动到 盒子模型 上方 , 会显示如下内容 ;

淡蓝色 是 盒子内容 的颜色 ;

青色 是 盒子内边距 的颜色 ;

右侧的 图 , 可以很明确的看出 , 盒子内容 , 内边距 , 边框 , 外边距 的轮廓 ;


3、代码示例 - 设置 2 个值


padding 属性设置 2 个值 : 设置 上下、左右 内边距 ;


代码示例 :

<!DOCTYPE html> 
<html lang="en">
<head>    
	<meta charset="UTF-8" /> 
    <title>内边距测试</title>
	<base target="_blank"/>
	<style type="text/css">
		div {
			width: 200px;
			height: 200px;
			
			/* 设置边框 */
			border: 1px solid blue;
			
			/* 设置 上下内边距 20px , 左右内边距 10px */
			padding: 20px 10px;
		}
	</style>
</head>
<body>
	<div>内边距测试</div>
</body>
</html>

展示效果 :

F12 进入调试模式 , 查看盒子模型宽高 ;

由下图可知 , 盒子 宽度 220 像素 , 高度 240 像素 ;


4、代码示例 - 设置 3 个值


padding 属性设置 3 个值 : 设置 上、左右、下 内边距 ;


代码示例 :

<!DOCTYPE html> 
<html lang="en">
<head>    
	<meta charset="UTF-8" /> 
    <title>内边距测试</title>
	<base target="_blank"/>
	<style type="text/css">
		div {
			width: 200px;
			height: 200px;
			
			/* 设置边框 */
			border: 1px solid blue;
			
			/* 设置 上内边距 20px , 左右内边距 10px , 下内边距 30px */
			padding: 20px 10px 30px;
		}
	</style>
</head>
<body>
	<div>内边距测试</div>
</body>
</html>

展示效果 :

盒子的宽高是 250 x 220 像素 ;


5、代码示例 - 设置 4 个值


padding 属性设置 4 个值 : 设置 上、右、下、左 内边距 ;


代码示例 :

<!DOCTYPE html> 
<html lang="en">
<head>    
	<meta charset="UTF-8" /> 
    <title>内边距测试</title>
	<base target="_blank"/>
	<style type="text/css">
		div {
			width: 200px;
			height: 200px;
			
			/* 设置边框 */
			border: 1px solid blue;
			
			/* 设置 上内边距 20px , 右内边距 10px , 
			   下内边距 30px , 左内边距 50px */
			padding: 20px 10px 30px 50px;
		}
	</style>
</head>
<body>
	<div>内边距测试</div>
</body>
</html>

展示效果 :

F12 进入调试模式 ;

盒子 宽度 260 像素 , 高度 250 像素 ;

写法CSSspanclasstokenhtml前端内边距内边距复合写法

有关【CSS】盒子模型内边距 ② ( 内边距复合写法 | 代码示例 )的更多相关文章

  1. ruby-on-rails - Rails - 子类化模型的设计模式是什么？ - 2

    我有一个模型:classItem项目有一个属性“商店”基于存储的值，我希望Item对象对特定方法具有不同的行为。Rails中是否有针对此的通用设计模式？如果方法中没有大的if-else语句，这是如何干净利落地完成的？ 最佳答案 通常通过Single-TableInheritance. 关于ruby-on-rails-Rails-子类化模型的设计模式是什么？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.co

  2. ruby - 如何在 buildr 项目中使用 Ruby 代码？ - 2

    如何在buildr项目中使用Ruby？我在很多不同的项目中使用过Ruby、JRuby、Java和Clojure。我目前正在使用我的标准Ruby开发一个模拟应用程序，我想尝试使用Clojure后端(我确实喜欢功能代码)以及JRubygui和测试套件。我还可以看到在未来的不同项目中使用Scala作为后端。我想我要为我的项目尝试一下buildr(http://buildr.apache.org/)，但我注意到buildr似乎没有设置为在项目中使用JRuby代码本身!这看起来有点傻，因为该工具旨在统一通用的JVM语言并且是在ruby中构建的。除了将输出的jar包含在一个独特的、仅限ruby​​

  3. ruby-on-rails - Rails 源代码 : initialize hash in a weird way? - 2

    在rails源中:https://github.com/rails/rails/blob/master/activesupport/lib/active_support/lazy_load_hooks.rb可以看到以下内容@load_hooks=Hash.new{|h,k|h[k]=[]}在IRB中，它只是初始化一个空哈希。和做有什么区别@load_hooks=Hash.new 最佳答案 查看rubydocumentationforHashnew→new_hashclicktotogglesourcenew(obj)→new_has

  4. ruby-on-rails - Rails - 一个 View 中的多个模型 - 2

    我需要从一个View访问多个模型。以前，我的links_controller仅用于提供以不同方式排序的链接资源。现在我想包括一个部分(我假设)显示按分数排序的顶级用户(@users=User.all.sort_by(&:score))我知道我可以将此代码插入每个链接操作并从View访问它，但这似乎不是“ruby方式”，我将需要在不久的将来访问更多模型。这可能会变得很脏，是否有针对这种情况的任何技术？注意事项:我认为我的应用程序正朝着单一格式和动态页面内容的方向发展，本质上是一个典型的网络应用程序。我知道before_filter但考虑到我希望应用程序进入的方向，这似乎很麻烦。最终从任何

  5. ruby - capybara field.has_css?匹配器 - 2

    我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解，字段“Email”是一个节点，因此调用must_have_css绝对有效!我做错了什么？ 最佳答案 通过JonasNicklas得到了答案:No

  6. ruby-on-rails - 在混合/模块中覆盖模型的属性访问器 - 2

    我有一个包含模块的模型。我想在模块中覆盖模型的访问器方法。例如:classBlah这显然行不通。有什么想法可以实现吗？ 最佳答案 您的代码看起来是正确的。我们正在毫无困难地使用这个确切的模式。如果我没记错的话，Rails使用#method_missing作为属性setter，因此您的模块将优先，阻止ActiveRecord的setter。如果您正在使用ActiveSupport::Concern(参见thisblogpost)，那么您的实例方法需要进入一个特殊的模块:classBlah

  7. ruby-on-rails - 如何验证非模型(甚至非对象)字段 - 2

    我有一个表单，其中有很多字段取自数组(而不是模型或对象)。我如何验证这些字段的存在？solve_problem_pathdo|f|%>... 最佳答案 创建一个简单的类来包装请求参数并使用ActiveModel::Validations。#definedsomewhere,atthesimplest:require'ostruct'classSolvetrue#youcouldevencheckthesolutionwithavalidatorvalidatedoerrors.add(:base,"WRONG!!!")unlesss

  8. ruby-on-rails - form_for 中不在模型中的自定义字段 - 2

    我想向我的Controller传递一个参数，它是一个简单的复选框，但我不知道如何在模型的form_for中引入它，这是我的观点:{:id=>'go_finance'}do|f|%>Transferirde:para:Entrada:"input",:placeholder=>"Quantofoiganho?"%>Saída:"output",:placeholder=>"Quantofoigasto?"%>Nota:我想做一个额外的复选框，但我该怎么做，模型中没有一个对象，而是一个要检查的对象，以便在Controller中创建一个ifelse，如果没有检查，请帮助我，非常感谢,谢谢

  9. ruby-on-rails - 如何将验证与模型分开 - 2

    我有一些非常大的模型，我必须将它们迁移到最新版本的Rails。这些模型有相当多的验证(User有大约50个验证)。是否可以将所有这些验证移动到另一个文件中？说app/models/validations/user_validations.rb。如果可以，有人可以提供示例吗？ 最佳答案 您可以为此使用关注点:#app/models/validations/user_validations.rbrequire'active_support/concern'moduleUserValidationsextendActiveSupport:

  10. ruby-on-rails - Rails 模型——非持久类成员或属性？ - 2

    对于Rails模型，是否可以/建议让一个类的成员不持久保存到数据库中？我想将用户最后选择的类型存储在session变量中。由于我无法从我的模型中设置session变量，我想将值存储在一个“虚拟”类成员中，该成员只是将值传递回Controller。你能有这样的类(class)成员吗？ 最佳答案 将非持久属性添加到Rails模型就像任何其他Ruby类一样:classUser扩展解释:在Ruby中，所有实例变量都是私有(private)的，不需要在赋值前定义。attr_accessor创建一个setter和getter方法:classUs

随机推荐