[CSS3] CSS Display Property: Block, Inline-Block, and Inline
2023-09-14 09:00:54 时间
Understanding the most common CSS display types of block, inline-block, and inline will allow you to get the most out of your HTML and use CSS Frameworks like Bootstrap to their fullest.
Takeway:
- Inline: Can NOT add height and width. But can add margin and padding
- Inline-block: Can add height, width, margin and padding. Not take the whole row.
- Block: Can add height, width, margin and padding, take the whole row.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <p>Here is some text in a paragraph tag, a paragraph tag has a dispay property of block by defualt. <span class="inline">A span is inline by defualt</span> but with some styling we can make it <span class="inline-block">inline-block</span>. Inline block will respect top and bottom margins and padding. We can also make it <span class="block">block</span> by adding classes and styling them.</p> </body> </html>
.box { border: 1px solid black; margin: 5px; display: block; } p { border: 1px solid black; } .inline { border: 1px solid blue; display: inline; margin-left: 10px; margin-right: 50px; padding-left: 10px; padding-right: 50px; margin-top: 50px; width: 500px; // Doesn't work height: 200px; // Doesn't work } .inline-block { border: 1px solid red; display: inline-block; margin-right: 20px; width: 200px; height: 50px; } .block { display: block; border: 1px solid green; width: 50px; height: 100px; }
相关文章
- 添加CSS3图片呼吸灯特效-鼠标悬浮还有放大效果
- CSS3之opacity属性的简单使用
- 【CSS3】---- 纯 css 控制 html5旋转音乐图标,控制背景音乐
- css怎么改鼠标样式,如何利用CSS改变鼠标的样式
- css 更改所有text,CSS之cssText「建议收藏」
- CSS3 transition的使用
- CSS3 transition 渐变特效
- CSS3新增选择器
- html css制作404页面,CSS3绘制404页面
- CSS3 动画 animation
- CSS媒体查询_css网页
- CSS 换行_css不允许换行
- css3美化半个字符 代码教程
- ResponsiveAeon:响应式 CSS3 网格系统框架
- CSS3 圆形时钟式网页进度条详解编程语言
- jquery判断css3动画是否完成的方法详解编程语言
- CSS3毛玻璃
- CSS如何影响MySQL的使用(css影响MySQL)
- CSS操作MySQL探索无可比拟的新空间(css操作mysql)
- CSS与MySQL合力提升网页性能(css与mysql结合)
- MySQL登陆系统CSS实现一键登录(css mysql登陆)
- 简单的加密css地址防止别人下载你的CSS文件的方法
- php压缩多个CSS为一个css的代码并缓存