inline-block容器的高度撑开位置

block的高度是从最上面撑开的

那么inline-block呢?

直接上代码

doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
    #test {
      
        line-height: 0;
        font-size: 80px;
        background-color: gray;
    }
    #test span {
      
        display: inline-block;
        background-color: red;
        height: 1px;
        width: 150px;
    }
    #s1 {
      
        
    }
    #s2 {
      
        line-height: 1;
    }
style>
head>

<body>
<div style="height: 100px;">div>
<div id="test">
    <span id="s0">span>
    <span id="s1">33span>
    <span id="s2">33span>
div>
body>
html>

inline-block容器的高度撑开位置_第1张图片

看到没?3个inline-block的撑开位置是不一样的。

同时把他们的父元素撑开了。

把3个inline-block高度加高试试

#test span {
        display: inline-block;
        background-color: red;
        height: 10px;
        width: 150px;
    }

撑开方向也不一样。

把span换成button试一试

doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
    #test {
      
        line-height: 0;
        font-size: 80px;
        background-color: gray;
    }
    #test button {
      
        //display: inline-block;
        line-height: 0;
        font-size: 80px;
        background-color: red;
        height: 1px;
        width: 150px;
    }
    #s1 {
      
        
    }
    #s2 {
      
        line-height: 1 !important;
    }
style>
head>

<body>
<div style="height: 100px;">div>
<div id="test">
    <button id="s0">button>
    <button id="s1">33button>
    <button id="s2">33button>
div>
body>
html>

inline-block容器的高度撑开位置_第2张图片

height是1的时候跟span差不多的表现

增加height之后:

doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
    #test {
      
        line-height: 0;
        font-size: 80px;
        background-color: gray;
    }
    #test button {
      
        //display: inline-block;
        line-height: 0;
        font-size: 80px;
        background-color: red;
        height: 30px;
        width: 150px;
    }
    #s1 {
      
        
    }
    #s2 {
      
        line-height: 1 !important;
    }
style>
head>

<body>
<div style="height: 100px;">div>
<div id="test">
    <button id="s0">button>
    <button id="s1">33button>
    <button id="s2">33button>
div>
body>
html>

inline-block容器的高度撑开位置_第3张图片

中间元素的撑开方向与span不一样了

转载于:https://www.cnblogs.com/chen8840/p/4997610.html

你可能感兴趣的:(inline-block容器的高度撑开位置)