與換行內聯元件沒有邊界內邊距

Question

這些照片示出了具有display: inline標題元素定義以及padding: 0 15px：

如圖片，在第一行的left padding是可見但不是right padding。在換行之後，情況正好相反。

我的問題是，當內聯元素跨越幾行時，是否可以在兩行上應用填充（css trick或javascript）？

Answer 1

是正確的，你可以使用boxdecorationbreak做到這一點：克隆。

支持boxdecorationbreak:clone;這是相當不錯和IE瀏覽器就可以使用

white-space:pre-wrap;

h1 { 
     color: #fff; 
     background-color: #B41E81; 
     font-family: Arial; 
     font-weight:100; 
     display: inline; 
     padding: 0 15px; 
     -webkit-box-decoration-break: clone; 
     box-decoration-break: clone; 
     white-space:pre-wrap; /*IE*/ 
    } 

檢查支持

http://caniuse.com/#feat=css-boxdecorationbreak


從MDN

空白：預包裝

預包裝的空白序列被保留。行在 換行符被破壞，在<br>，並根據需要填補線框。

boxdecorationbreak：克隆

每個盒片段與指定 邊界，空白和邊距包裹每個片斷獨立地渲染。 border-radius， border-image和box-shadow，分別應用於每個片段 。在每個片段 中獨立繪製背景，這意味着具有背景重複：無重複 的背景圖像可以重複多次。

DEMO

h1 { 
 
    color: #fff; 
 
    background-color: #B41E81; 
 
    font-family: Arial; 
 
    font-weight:100; 
 
    display: inline; 
 
    padding: 0 15px; 
 
    -webkit-box-decoration-break: clone; 
 
    box-decoration-break: clone; 
 
    white-space:pre-wrap; /*IE*/ 
 
}

<h1>Maximera effekten fore och effekt motet fore och effekt motet</h1>

Answer 2

這是一個古老的化妝品問題，但幸運的是，現在它實際上可以用新的屬性box-decoration-break輕鬆解決。除了IE之外，主要供應商已經有supported（在這種情況下優雅的降級）。

h1 { 
 
    color: #fff; 
 
    background-color: #B41E81; 
 
    font-family: Arial; 
 
    display: inline; 
 
    padding: 0 20px; 
 
    -webkit-box-decoration-break: clone; 
 
    box-decoration-break: clone; 
 
}

<h1>Maximera effekten fore och efter motet retul beternium</h1>