zoukankan      html  css  js  c++  java
  • [CSS3] CSS Display Property: Block, Inline-Block, and Inline

    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:

    1. Inline: Can NOT add height and width. But can add margin and padding
    2. Inline-block: Can add height, width, margin and padding. Not take the whole row.
    3. 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;
    }

  • 相关阅读:
    linux IO调度算法
    Programming Languages: Application and Interpretation
    zz 跟风小结一下孕期~
    UML和模式应用学习笔记-1(面向对象分析和设计)
    ASP.NET交互Rest服务接口(Jquery的Get与Post方式)
    Linq To Xml操作XML增删改查
    MSSQL数据库迁移到Oracle(二)
    MSSQL数据库迁移到Oracle
    学习EF之CodeFirst二(数据库对应映射)
    学习EF之CodeFirst一
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5249257.html
Copyright © 2011-2022 走看看