如何直觀地展現padding和margin在可視化編輯器

-1

我目前正在建設一個工具，允許打開一個頁面，進行修改（改變文本，一些CSS規則等）存在並共享同事之間更新後的頁面。如何直觀地展現padding和margin在可視化編輯器

還有其他工具（如WebFlow）做了類似的工作，但我需要開發專門針對我的組織需求的工具。

我的問題：在我的工具，當你將鼠標懸停在一個元素，它被加亮（我應用的box-shadow大半徑，使其色彩元素做到這一點）。我現在想也直觀顯示填充和保證金，但我不知道如何做到這一點，並顯示它像檢查。有人對這個有經驗麼？

在此先感謝！

來源

2017-08-07 Jiří Heczko

您可以嘗試包裝內的另一個股利有色利潤。

它交給鏈接coloured padding添加顏色填充。

注意：邊距我已經使用屬性「顯示：流根」，我不知道這是最好的屬性，它可能有跨瀏覽器問題。

這是單獨使用HTML和CSS，如果您使用JavaScript，您只需獲取元素的屬性並自動添加樣式。

.tester{ 
 
    padding:15px; 
 
    margin:15px; 
 
    background-image: linear-gradient(to bottom, rgba(240, 255, 40, 1) 0%, rgba(240, 255, 40, 1) 100%), linear-gradient(to bottom, rgba(240, 40, 40, 1) 0%, rgba(240, 40, 40, 1) 100%); 
 
    background-clip: content-box, padding-box; 
 
} 
 
.wrapper{ 
 
    background-color:gray; 
 
    display: flow-root; 
 
}

<div class="wrapper"> 
 
    <div class="tester"> 
 
    gray is for margin and red is for padding 
 
    </div> 
 
</div>

來源

2017-08-07 12:23:30

如何直觀地展現padding和margin在可視化編輯器

回答

相關問題