inline、inline-block、block 的 margin 和 padding 表現(xiàn)

missonce 發(fā)布于2019-08-30 15:53 / 3482人閱讀

摘要：的和表現(xiàn)概述屬性表現(xiàn)在垂直方向上不生效設(shè)置本身生效，但是沒有把父級元素?fù)伍_盒寬度默認(rèn)為內(nèi)容寬度，設(shè)置和都生效盒寬度默認(rèn)為父元素寬度，設(shè)置和都生效測試結(jié)果圖測試代碼

inline、inline-block、block 的 margin 和 padding 表現(xiàn) 概述

display 屬性	表現(xiàn)
inline	margin 在垂直方向上不生效；設(shè)置 padding 本身生效，但是沒有把父級元素?fù)伍_；
inline-block	盒寬度默認(rèn)為內(nèi)容寬度，設(shè)置 margin 和 padding 都生效
block	盒寬度默認(rèn)為父元素 100% 寬度，設(shè)置 margin 和 padding 都生效

測試結(jié)果圖

測試代碼

css

body {
  margin: 0;
}
section {
  width: 800px;
  margin: 20px auto 0;
  border: 1px solid #660099;
}
header {
  line-height: 40px;
  font-size: 22px;
  text-align: center;
}
.box {
  border: 1px solid yellow;
}
.com {
  margin: 10px;
  padding: 10px;
  border: 1px solid #000;
}
.inline {
  display: inline;
  background: #FF3366;
}
.inline-block {
  display: inline-block;
  background: #FF9966;
}
.block {
  display: block;
  background: #99CC66;
}
.box {
  background: #006699;
}

html


  inline
  
    inline
  
  
    inline
  


  inline-block
  
    inline-block
  
  
    inline-block
  


  block
  
    block
  
  
    block

GPU云服務(wù)器云服務(wù)器 inline-block inline_block inline_block間隙內(nèi)存故障的表現(xiàn)

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/116668.html

相關(guān)文章

CSS2中盒模型與布局的一些概念關(guān)系

摘要：的一些名詞和概念用來幫你更明確地去描述世界的事物。具體信息可以參考盒模型的解釋，這里暫且不作展開。的位置和大小時(shí)根據(jù)一個(gè)稱為的邊界進(jìn)行計(jì)算的。其它情況，依據(jù)設(shè)定的值進(jìn)行處理指定值最終表現(xiàn)值與指定值相同 CSS的一些名詞和概念用來幫你更明確地去描述HTML/CSS世界的事物。 box 在CSS中，一個(gè)元素就可以看作一個(gè)box。具體信息可以參考盒模型的解釋，這里暫且不作展開。 conta...

happyhuangjinjin 2019-08-30 15:55 評論0 收藏0
深入理解css盒子模型

摘要：下面我們就一步一步揭開的神秘面紗，深入理解盒模型，這對我們在布局上會(huì)有一個(gè)質(zhì)的提升。與內(nèi)聯(lián)元素的百分比值與內(nèi)聯(lián)元素。 css是一門具象語言，并不像js那樣具有邏輯性，因此，就算入行了前端很久的工程師，也覺得css難以掌握。下面我們就一步一步揭開css的神秘面紗，深入理解css盒模型，這對我們在布局上會(huì)有一個(gè)質(zhì)的提升。盒子模型 showImg(https://segmentfault....

gplane 2019-08-29 15:14 評論0 收藏0
為什么有些內(nèi)聯(lián)（行內(nèi)）元素可以設(shè)置寬高？

摘要：宋體塊級元素主要有宋體宋體內(nèi)聯(lián)元素不會(huì)以新行開始，和相鄰的內(nèi)聯(lián)元素在同一行。也就是說，絕對定位或者浮動(dòng)的內(nèi)聯(lián)元素，實(shí)際表現(xiàn)為塊級元素，可以設(shè)置寬高和邊距。為什么有些內(nèi)聯(lián)（行內(nèi)）元素如img、input可以設(shè)置寬高？在說明之前我們先來了解一些定義。塊級元素和內(nèi)聯(lián)元素： ①塊級元素總是獨(dú)占一行，表現(xiàn)為另起一行開始，而且其后的元素也必須另起一行顯示。寬度(width)、高度(height)、...

netScorpion 2019-04-23 13:31 評論0 收藏0
FE.CSS-快速梳理

摘要：元素根據(jù)外在盒子是內(nèi)聯(lián)還是塊級，分成塊級元素和內(nèi)聯(lián)元素。值為常見的內(nèi)聯(lián)元素有。注數(shù)值需向上舍入是相對于計(jì)算的只能應(yīng)用于內(nèi)聯(lián)元素以及的元素。的顯示內(nèi)聯(lián)元素元素的垂直中心點(diǎn)和行框盒子基線往上處對齊。前言本文是對《CSS世界》閱讀中所做筆記和感悟，若有錯(cuò)誤請指正。概述 CSS設(shè)計(jì)初衷是為了更好地展示圖文。HTML元素根據(jù)外在盒子是內(nèi)聯(lián)還是塊級，分成塊級元素和內(nèi)聯(lián)元素。HTML元素也可根...

XUI 2019-08-23 15:40 評論0 收藏0
css基礎(chǔ)知識整理篇

摘要：折疊后的計(jì)算參與折疊的都是正值在都是正數(shù)的情況下，取其中較大的值為最終值。參與折疊的中有正值，有負(fù)值有正有負(fù)，先取出負(fù)中絕對值中最大的，然后，和正值中最大的相加。單冒號用于偽類，雙冒號用于偽元素。轉(zhuǎn)自某個(gè)大神整理的面試題盒子模型標(biāo)準(zhǔn)盒子模型內(nèi)容（content）+ 填充（padding）+ 邊界（margin）+ 邊框（border）; 低版本IE盒子模型 content部分把...

QiShare 2019-08-29 11:24 評論0 收藏0