行内元素的margin border padding问题

已于 2022-09-15 23:36:14 修改
阅读量183 收藏
点赞数 1
文章标签： 前端 html css3
于 2022-09-15 23:34:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47517731/article/details/126881700
版权
本文揭示了行内元素中padding-top/bottom和border-top/bottom的行为特性：它们看似撑大但不占空间，同时介绍了margin对行内元素的无效性。理解这些细节有助于提升前端布局控制的精确性。
摘要由CSDN通过智能技术生成

  /* 行内元素padding-top padding-bottom 会撑大但是不占空间 */

  /* 行内元素border-top  border-bottom   会撑大但是不占空间 */

 /* 行内元素margin-top  margin-bottom   是不生效的 */

#根据上述的情况不难发现，行内非替换元素的 padding border 对上下是不会产生效果的，虽然看起来撑大了，但是不占据空间 margin直接不生效

走，带你去玩
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html块、行内块、行内元素
weixin_43748812的博客
02-23 539
html块、行内块、行内元素 块级元素： <div>、<p>、<h1-5>、<nav>、<aside>、<header>、<footer>、<section>、<article>、<ul-li>、<address 特性： 1. 识别宽高 2.自动换行 3.可设置m...
css元素与浏览器边框,CSS3盒子模型（边框&内边框&外边框&水平方向布局&垂直方向布局&外边距折叠&行内元素）&浏览器的默认样式...
weixin_42109178的博客
08-03 676
文章目录1、盒子模型1.1 盒子模型1.2 边框1.3 内边框1.4 外边框1.5 水平方向布局1.6 垂直方向布局 + 1.7 外边距折叠1.8 行内元素2、浏览器的默认样式1、盒子模型1.1 盒子模型.box1{/* 内容区content,元素中的所有子元素和文本内容都在内容区中排列内容区的大小由width和height设置，宽度与高度*/width: 200px;height: 200px;...
【CSS】行内元素设置padding和margin
weixin_45585106的博客
03-12 1773
行内元素不能指定宽度和高度，但是可以设置margin，border，padding。 分两行写了6个行内元素 border 给第一个和第二个行内元素设置一个四周10px的，蓝色的border，这时的效果： 可以看到，左右的边框改变了本身以及相邻元素的位置；上下的边框虽然生效了，但是其他元素并没有改变位置。 padding 给第一个和第二个行内元素设置一个四周10px的padding，这...
关于行内元素可以设置padding,border的测试
Get Things Done
08-01 4400
一、总结 块级元素设置padding，border改变布局，改变嵌套内容的框占据文档流中的范围（同样也影响背景的区域）。 行内元素设置padding，border在应用背景图片的时候会有显示，但是不改变垂直方向的布局。结果会出现设置后padding，border的背景会覆盖上面的元素的内容，下部被当做背景，被下级元素覆盖。 二、测试   Test a border
17、行内元素
MoonNight608的博客
06-22 209
1、行内元素 2、display属性 3、visibility属性
css盒模型和块级、行内元素深入理解
09-25
每个HTML元素都可以被视为一个矩形框，由四个部分组成：内容区（content）、内边距（padding）、边框（border）和外边距（margin）。内容区包含元素的实际内容，如文本或图像。内边距是内容周围的空白区域，可以用来...
行内元素的盒模型1
08-08
它定义了元素占用空间的方式，包括元素的内容、内边距（padding）、边框（border）和外边距（margin）。本文将深入探讨行内元素的盒模型，并介绍与之相关的`display`和`visibility`属性。 首先，行内元素，如`...
浮动后的li元素居中实现方法
12-09
这种方法适用于`li`元素是行内元素或行内块级元素的情况。首先，将`ul`元素的`text-align`属性设置为`center`，这样其内部的行内元素会被居中对齐。接着，将`li`元素的`display`属性设置为`inline`，使其像文本一样...
工程师必知必会盒模型与块状行内元素.docx
10-23
它定义了一个元素的布局方式，包括内容区域、内边距（padding）、边框（border）以及外边距（margin）。这些组成部分共同决定了元素的大小及其与其他元素的空间关系。 - **内容区域**：指的是元素的实际内容所占的...
HTML5和CSS3（三）
wangjunlei666的博客
05-02 846
盒模型 盒模型 网页是一个多层的结构，一层摁着一层通过CSS可以分别为每一层来设置样式，作为用户来讲只能看到最顶上一层，这些层中，最底下的一层称为文档流，文档流是网页的基础我们所创建的元素默认都是在文档流中进行排列 块元素 块元素会在页面中独占一行，默认宽度是父元素的全部（会把父元素占满），默认高度是被内容撑开（子元素） 行内元素 行内元素不会独占页面的一行，只占自身大小，行内元素在页面中左向右水平排列（书写习惯完全一致）如果一行之中不能完全容纳全部的行内元素，则会换到第二行自左向右排列，行内元素的默认宽度
行内元素border-bottom在IE7下不生效
qq814374557的博客
07-17 1309
行内元素border-bottom在IE7下不生效今天同事让我解决一个问题，就是他设置的span里面直接加border-bottom在IE7下不生效，经过各种demo的书写。终于找到了原理和方法。
CSS 行内级元素和行内框
歪脖先生的博客
02-19 2071
行内级元素和行内框行内级元素（inline-level element），就是那些在源文档中不会形成新块的元素，这些元素的左右可以放置其他元素。典型的行内级元素有 span、em、strong、a，等等。根据元素自身的特点，行内级元素又被分为非替换元素和替换元素。非替换元素的内容直接包含在文档中，浏览器在渲染页面时，会读取元素的内容，并直接显示在页面上。说白了，非替换元素的内容就是文本。如：&lt...
HTML行内元素/行级元素/内联元素/行标签/内联标签/行内标签/行元素
liaowenxiong的博客
07-03 2756
文章目录行内元素的特点行内元素清单可变元素素列表 inline element. 也叫行级元素、内联元素。 行内元素默认设置宽度是不起作用，需设置 display:inline-block 或者 block 才行。 行内元素的特点 可以和其他元素处于一行，不用必须另起一行； 元素的高度、宽度及顶部和底部边距不可设置； 元素的宽度就是它包含的文字、图片的宽度，不可改变； 对 margin 仅设置左右方向有效，上下无效； padding设置上下左右都有效，即会撑大空间； 行内元素尺寸由内
CSS盒子模型(border、padding、margin设置)、行内块或行内元素水平居中、去除li小圆点、圆角、盒子阴影、文字阴影、透明度
Bulut0907
01-27 5760
目录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 {
52_行内元素的盒模型
述安的博客
08-18 195
设置行内元素的显示类型display、行内元素的可见性visibility
CSS的行内样式书写规范
css教程
12-26 3218
现在做网站的大都是使用现成的CMS，都很少使用到CSS了。 我自网站建成到现在五个月，期间一直是在用后台在维持网站更新，今天浏览主页时发现有个地方已经过时了，需要修改以下，然后通过编辑器找到CSS源代码 发现如果改了其它页面也会受影响，所以就决定使用CSS行内样式了。但是想动手修改时发现写不出来了（忘了行内样式的书写规范了），然后在网站找了一些CSS样式表 行内样式的范例参考了一下，改出了自己
HTML 行内元素 与 块级元素
热门推荐
研究与专注
08-15 1万+
行内元素一般是内容的容器，而块级元素一般是其他容器的容器。一般情况下，行内元素只能包含内容或者其它行内元素，宽度和长度依据内容而定，不可以设置，可以和其它元素和平共处于一行；而块级元素可以包含行内元素和其它块级元素，且占据父元素的整个空间，可以设置 width 和 height 属性，浏览器通常会在块级元素前后另起一个新行。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值