Merge branch '27827-cleanup-markdown' into 'master'

Resolve "Clean up padding with Markdown headers"

Closes #27827

See merge request !10350

app/assets/stylesheets/framework/awards.scss

@@ -108,8 +108,7 @@
 }
 
 .award-control {
-  margin: 3px 5px 3px 0;
-  padding: .35em .4em;
+  margin-right: 5px;
   outline: 0;
 
   &.disabled {

app/assets/stylesheets/framework/common.scss

@@ -70,7 +70,7 @@ pre {
 }
 
 hr {
-  margin: $gl-padding 0;
+  margin: 24px 0;
   border-top: 1px solid darken($gray-normal, 8%);
 }
 

app/assets/stylesheets/framework/files.scss

@@ -73,14 +73,6 @@
 
     &.wiki {
       padding: 30px $gl-padding;
-
-      .highlight {
-        margin-bottom: 9px;
-
-        > pre {
-          margin: 0;
-        }
-      }
     }
 
     &.blob-no-preview {

app/assets/stylesheets/framework/timeline.scss

@@ -4,7 +4,7 @@
   padding: 0;
 
   .timeline-entry {
-    padding: $gl-padding $gl-btn-padding 14px;
+    padding: $gl-padding $gl-btn-padding 0;
     border-color: $white-normal;
     color: $gl-text-color;
     border-bottom: 1px solid $border-white-light;

app/assets/stylesheets/framework/typography.scss

@@ -8,6 +8,13 @@
 
   img {
     max-width: 100%;
+    margin: 0 0 8px;
+  }
+
+  p a:not(.no-attachment-icon) img {
+    // Remove bottom padding because
+    // <p> already has $gl-padding bottom
+    margin-bottom: 0;
   }
 
   *:first-child:not(.katex-display) {
@@ -47,44 +54,50 @@
   h1 {
     font-size: 1.75em;
     font-weight: 600;
-    margin: 16px 0 10px;
-    padding: 0 0 0.3em;
+    margin: 24px 0 16px;
+    padding-bottom: 0.3em;
     border-bottom: 1px solid $white-dark;
     color: $gl-text-color;
+
+    &:first-child {
+      margin-top: 0;
+    }
   }
 
   h2 {
     font-size: 1.5em;
     font-weight: 600;
-    margin: 16px 0 10px;
+    margin: 24px 0 16px;
+    padding-bottom: 0.3em;
+    border-bottom: 1px solid $white-dark;
     color: $gl-text-color;
   }
 
   h3 {
-    margin: 16px 0 10px;
+    margin: 24px 0 16px;
     font-size: 1.3em;
   }
 
   h4 {
-    margin: 16px 0 10px;
+    margin: 24px 0 16px;
     font-size: 1.2em;
   }
 
   h5 {
-    margin: 16px 0 10px;
+    margin: 24px 0 16px;
     font-size: 1em;
   }
 
   h6 {
-    margin: 16px 0 10px;
+    margin: 24px 0 16px;
     font-size: 0.95em;
   }
 
   blockquote {
     color: $gl-grayish-blue;
     font-size: inherit;
-    padding: 8px 21px;
-    margin: 12px 0;
+    padding: 8px 24px;
+    margin: 16px 0;
     border-left: 3px solid $white-dark;
   }
 
@@ -95,19 +108,20 @@
 
   blockquote p {
     color: $gl-grayish-blue !important;
+    margin: 0;
     font-size: inherit;
     line-height: 1.5;
   }
 
   p {
     color: $gl-text-color;
-    margin: 6px 0 0;
+    margin: 0 0 16px;
   }
 
   table {
     @extend .table;
     @extend .table-bordered;
-    margin: 12px 0;
+    margin: 16px 0;
     color: $gl-text-color;
 
     th {
@@ -120,7 +134,7 @@
   }
 
   pre {
-    margin: 12px 0;
+    margin-bottom: 16px;
     font-size: 13px;
     line-height: 1.6em;
     overflow-x: auto;
@@ -134,7 +148,7 @@
   ul,
   ol {
     padding: 0;
-    margin: 3px 0 !important;
+    margin: 0 0 16px !important;
   }
 
   ul:dir(rtl),

app/assets/stylesheets/pages/detail_page.scss

@@ -29,11 +29,5 @@
 
   .description {
     margin-top: 6px;
-
-    p {
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
   }
 }

app/assets/stylesheets/pages/issuable.scss

@@ -52,7 +52,7 @@
 
   .title {
     padding: 0;
-    margin: 0;
+    margin-bottom: 16px;
     border-bottom: none;
   }
 
@@ -357,6 +357,8 @@
 }
 
 .detail-page-description {
+  padding: 16px 0 0;
+
   small {
     color: $gray-darkest;
   }
@@ -364,6 +366,8 @@
 
 .edited-text {
   color: $gray-darkest;
+  display: block;
+  margin: 0 0 16px;
 
   .author_link {
     color: $gray-darkest;

app/assets/stylesheets/pages/note_form.scss

@@ -28,7 +28,7 @@
 .note-edit-form {
   .note-form-actions {
     position: relative;
-    margin-top: $gl-padding;
+    margin: $gl-padding 0;
   }
 
   .note-preview-holder {

app/assets/stylesheets/pages/notes.scss

@@ -102,13 +102,12 @@ ul.notes {
 
     .note-awards {
       .js-awards-block {
-        padding: 2px;
-        margin-top: 10px;
+        margin-bottom: 16px;
       }
     }
 
     .note-header {
-      padding-bottom: 3px;
+      padding-bottom: 8px;
       padding-right: 20px;
 
       @media (min-width: $screen-sm-min) {
@@ -151,6 +150,10 @@ ul.notes {
       margin-left: 65px;
     }
 
+    .note-header {
+      padding-bottom: 0;
+    }
+
     &.timeline-entry::after {
       clear: none;
     }

app/views/projects/issues/show.html.haml

@@ -50,7 +50,7 @@
       = link_to 'Edit', edit_namespace_project_issue_path(@project.namespace, @project, @issue), class: 'hidden-xs hidden-sm btn btn-grouped issuable-edit'
 
 .issue-details.issuable-details
-  .detail-page-description.content-block{ class: ('hide-bottom-border' unless @issue.description.present? ) }
+  .detail-page-description.content-block
     .issue-title-data.hidden{ "data" => { "initial-title" => markdown_field(@issue, :title),
       "endpoint" => rendered_title_namespace_project_issue_path(@project.namespace, @project, @issue),
     } }

app/views/projects/milestones/show.html.haml

@@ -36,7 +36,7 @@
       %a.btn.btn-default.btn-grouped.pull-right.visible-xs-block.js-sidebar-toggle{ href: "#" }
         = icon('angle-double-left')
 
-  .detail-page-description.milestone-detail{ class: ('hide-bottom-border' unless @milestone.description.present? ) }
+  .detail-page-description.milestone-detail
     %h2.title
       = markdown_field(@milestone, :title)
     %div

changelogs/unreleased/27827-cleanup-markdown.yml

@@ -0,0 +1,4 @@
+---
+title: Cleanup markdown spacing
+merge_request:
+author: