diff --git a/spec/text-editor-component-spec.js b/spec/text-editor-component-spec.js
index 37a9751e1..1d1e4eb9f 100644
--- a/spec/text-editor-component-spec.js
+++ b/spec/text-editor-component-spec.js
@@ -1840,17 +1840,22 @@ describe('TextEditorComponent', function () {
       expect(component.lineNodeForScreenRow(2).dataset.screenRow).toBe("2")
     })
 
-    it('measures block decorations taking into account both top and bottom margins', async function () {
+    it('measures block decorations taking into account both top and bottom margins of the element and its children', async function () {
       let [item, blockDecoration] = createBlockDecorationBeforeScreenRow(0, {className: "decoration-1"})
+      let child = document.createElement("div")
+      child.style.height = "7px"
+      child.style.width = "30px"
+      child.style.marginBottom = "20px"
+      item.appendChild(child)
       atom.styles.addStyleSheet(
-        'atom-text-editor .decoration-1 { width: 30px; height: 30px; margin-top: 10px; margin-bottom: 5px; }',
+        'atom-text-editor .decoration-1 { width: 30px; margin-top: 10px; }',
          {context: 'atom-text-editor'}
       )
 
       await nextAnimationFramePromise() // causes the DOM to update and to retrieve new styles
       await nextAnimationFramePromise() // applies the changes
 
-      expect(component.tileNodesForLines()[0].style.height).toBe(TILE_SIZE * editor.getLineHeightInPixels() + 30 + 10 + 5 + "px")
+      expect(component.tileNodesForLines()[0].style.height).toBe(TILE_SIZE * editor.getLineHeightInPixels() + 10 + 7 + 20 + "px")
       expect(component.tileNodesForLines()[0].style.webkitTransform).toBe("translate3d(0px, 0px, 0px)")
       expect(component.tileNodesForLines()[1].style.height).toBe(TILE_SIZE * editor.getLineHeightInPixels() + "px")
       expect(component.tileNodesForLines()[1].style.webkitTransform).toBe(`translate3d(0px, ${component.tileNodesForLines()[0].offsetHeight}px, 0px)`)
diff --git a/src/block-decorations-component.coffee b/src/block-decorations-component.coffee
index 0cfa7974f..35aec3921 100644
--- a/src/block-decorations-component.coffee
+++ b/src/block-decorations-component.coffee
@@ -26,7 +26,10 @@ class BlockDecorationsComponent
 
     for id, blockDecorationState of @oldState.blockDecorations
       unless @newState.blockDecorations.hasOwnProperty(id)
-        @blockDecorationNodesById[id].remove()
+        blockDecorationNode = @blockDecorationNodesById[id]
+        blockDecorationNode.previousSibling.remove()
+        blockDecorationNode.nextSibling.remove()
+        blockDecorationNode.remove()
         delete @blockDecorationNodesById[id]
         delete @oldState.blockDecorations[id]
 
@@ -41,19 +44,27 @@ class BlockDecorationsComponent
     for decorationId, blockDecorationNode of @blockDecorationNodesById
       style = getComputedStyle(blockDecorationNode)
       decoration = @newState.blockDecorations[decorationId].decoration
-      marginBottom = parseInt(style.marginBottom) ? 0
-      marginTop = parseInt(style.marginTop) ? 0
-      @presenter.setBlockDecorationDimensions(
-        decoration,
-        blockDecorationNode.offsetWidth,
-        blockDecorationNode.offsetHeight + marginTop + marginBottom
-      )
+      topRuler = blockDecorationNode.previousSibling
+      bottomRuler = blockDecorationNode.nextSibling
+
+      width = blockDecorationNode.offsetWidth
+      height = bottomRuler.offsetTop - topRuler.offsetTop
+      @presenter.setBlockDecorationDimensions(decoration, width, height)
 
   createAndAppendBlockDecorationNode: (id) ->
     blockDecorationState = @newState.blockDecorations[id]
+    blockDecorationClass = "atom--block-decoration-#{id}"
+    topRuler = document.createElement("div")
     blockDecorationNode = @views.getView(blockDecorationState.decoration.getProperties().item)
-    blockDecorationNode.id = "atom--block-decoration-#{id}"
+    bottomRuler = document.createElement("div")
+    topRuler.classList.add(blockDecorationClass)
+    blockDecorationNode.classList.add(blockDecorationClass)
+    bottomRuler.classList.add(blockDecorationClass)
+
+    @container.appendChild(topRuler)
     @container.appendChild(blockDecorationNode)
+    @container.appendChild(bottomRuler)
+
     @blockDecorationNodesById[id] = blockDecorationNode
     @updateBlockDecorationNode(id)
 
@@ -63,9 +74,13 @@ class BlockDecorationsComponent
     blockDecorationNode = @blockDecorationNodesById[id]
 
     if newBlockDecorationState.isVisible
+      blockDecorationNode.previousSibling.classList.remove("atom--invisible-block-decoration")
       blockDecorationNode.classList.remove("atom--invisible-block-decoration")
+      blockDecorationNode.nextSibling.classList.remove("atom--invisible-block-decoration")
     else
+      blockDecorationNode.previousSibling.classList.add("atom--invisible-block-decoration")
       blockDecorationNode.classList.add("atom--invisible-block-decoration")
+      blockDecorationNode.nextSibling.classList.add("atom--invisible-block-decoration")
 
     if oldBlockDecorationState.screenRow isnt newBlockDecorationState.screenRow
       blockDecorationNode.dataset.screenRow = newBlockDecorationState.screenRow
diff --git a/src/lines-tile-component.coffee b/src/lines-tile-component.coffee
index defcc0d8a..f4a7313ca 100644
--- a/src/lines-tile-component.coffee
+++ b/src/lines-tile-component.coffee
@@ -149,7 +149,7 @@ class LinesTileComponent
     if newLineState.screenRow isnt oldLineState.screenRow
       insertionPoint.dataset.screenRow = newLineState.screenRow
 
-    precedingBlockDecorationsSelector = newLineState.precedingBlockDecorations.map((d) -> "#atom--block-decoration-#{d.id}").join(',')
+    precedingBlockDecorationsSelector = newLineState.precedingBlockDecorations.map((d) -> ".atom--block-decoration-#{d.id}").join(',')
 
     if precedingBlockDecorationsSelector isnt oldLineState.precedingBlockDecorationsSelector
       insertionPoint.setAttribute("select", precedingBlockDecorationsSelector)
@@ -180,7 +180,7 @@ class LinesTileComponent
     if newLineState.screenRow isnt oldLineState.screenRow
       insertionPoint.dataset.screenRow = newLineState.screenRow
 
-    followingBlockDecorationsSelector = newLineState.followingBlockDecorations.map((d) -> "#atom--block-decoration-#{d.id}").join(',')
+    followingBlockDecorationsSelector = newLineState.followingBlockDecorations.map((d) -> ".atom--block-decoration-#{d.id}").join(',')
 
     if followingBlockDecorationsSelector isnt oldLineState.followingBlockDecorationsSelector
       insertionPoint.setAttribute("select", followingBlockDecorationsSelector)