{"id":237446,"date":"2016-02-08T07:38:38","date_gmt":"2016-02-08T14:38:38","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=237446"},"modified":"2021-06-01T08:57:42","modified_gmt":"2021-06-01T15:57:42","slug":"bleed","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/b\/bleed\/","title":{"rendered":"bleed"},"content":{"rendered":"\n<p>The <code>bleed<\/code> property in CSS is for specifying space outside of the <a href=\"https:\/\/drafts.csswg.org\/css-page\/#page-box\" rel=\"noopener\">page box<\/a> boundary when determining the size of a printed page.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">@page :left {\n  bleed: 10pt;\t\n}\n\n@page :top {\n  bleed: 5cm;\t\n}<\/code><\/pre>\n\n\n\n<p>Note that <code>bleed<\/code> is part of the <a href=\"https:\/\/drafts.csswg.org\/css-page\/\" rel=\"noopener\">Paged Media Module Level 3 spec<\/a>, which is currently a <strong>draft<\/strong> in progress. In fact, <code>bleed<\/code> is more accurately described as an at-rule descriptor rather than a property since it belongs to the <code>@page<\/code> at-rule.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"values\">Values<\/h3>\n\n\n<ul><li><code>auto<\/code>: Default is zero unless a <code>crop<\/code> value has been set on the <a href=\"https:\/\/drafts.csswg.org\/css-page\/#descdef-page-marks\" rel=\"noopener\"><code>marks<\/code><\/a> property which creates a default of <code>6pt<\/code>.<\/li><li><code>&lt;length&gt;<\/code>: Sets how far outside the <code>bleed<\/code> area is in each direction. Negative values are accepted, but there is no standard for how they would be implemented. Note that print size units (i.e. <code>pt<\/code>, <code>cm<\/code> and <code>in<\/code>) are accepted.<\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"more-on-bleed-areas\">More on bleed areas<\/h3>\n\n\n<p>The term <code>bleed<\/code> comes from printing. It is used to describe space that is designed beyond edge of the paper, so that when the paper is trimmed, the color goes all the way to the edge.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"300\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2016\/01\/bleed.jpg?resize=800%2C300&#038;ssl=1\" alt=\"\" class=\"wp-image-237449\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2016\/01\/bleed.jpg?w=800&amp;ssl=1 800w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2016\/01\/bleed.jpg?resize=300%2C113&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2016\/01\/bleed.jpg?resize=768%2C288&amp;ssl=1 768w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>How is this useful for web design? Well, actually, it&#8217;s not exactly <em>for<\/em> web design in the sense that the bleed has no bearing on what gets painted in the viewport. Instead, the <code>@page<\/code> rule is used for printing web pages onto physical paper. Having a <code>bleed<\/code> property gives us control in how web pages are rendered when printed, such as establishing a bleed area that is intended to be cut off. This could be especially cool when designing web pages that are intended to use as marketing collateral, like posters.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"more-information\">More information<\/h3>\n\n\n<ul><li><a href=\"https:\/\/drafts.csswg.org\/css-page\/#bleed-area\" rel=\"noopener\">CSS Paged Media Module Level 3 Spec<\/a><\/li><li><a href=\"https:\/\/css-tricks.com\/the-at-rules-of-css\/\">The At-Rules of CSS<\/a><\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"browser-support\">Browser support<\/h3>\n\n\n<figure class=\"wp-block-table browser-support-table ticss-c851d2a7\"><table class=\"has-fixed-layout\"><thead><tr><th>IE<\/th><th>Edge<\/th><th>Chrome<\/th><th>Firefox<\/th><th>Safari<\/th><\/tr><\/thead><tbody><tr><td>No<\/td><td>No<\/td><td>No<\/td><td>No<\/td><td>No<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<figure class=\"wp-block-table browser-support-table ticss-c851d2a7\"><table class=\"has-fixed-layout\"><thead><tr><th>iOS<\/th><th>Chrome Android<\/th><th>Firefox Chrome<\/th><th>Android Browser<\/th><th>Opera Mobile<\/th><\/tr><\/thead><tbody><tr><td>No<\/td><td>No<\/td><td>No<\/td><td>No<\/td><td>No<\/td><\/tr><\/tbody><\/table><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>The bleed property in CSS is for specifying space outside of the page box boundary when determining the size of a printed page. Note that bleed is part of the Paged Media Module Level 3 spec, which is currently a draft in progress. In fact, bleed is more accurately described as an at-rule descriptor rather [&hellip;]<\/p>\n","protected":false},"author":2508,"featured_media":0,"parent":13913,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-almanac-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":179166,"url":"https:\/\/css-tricks.com\/lodge\/svg\/06-using-svg-svg-background-image\/","url_meta":{"origin":237446,"position":0},"title":"06: Using SVG &#8211; SVG as background-image","date":"August 15, 2014","format":false,"excerpt":"SVG images can be used as background-image in CSS as well, just like PNG, JPG, or GIF. .element { background-image: url(\/images\/image.svg); } All the same awesomeness of SVG comes along for the ride, like flexibility while retaining sharpness. Plus you can do anything a raster graphic can do, like repeat.\u2026","rel":"","context":"With 9 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":374225,"url":"https:\/\/css-tricks.com\/almanac\/properties\/g\/grid-column\/","url_meta":{"origin":237446,"position":1},"title":"grid-column","date":"October 17, 2022","format":false,"excerpt":"The grid-column CSS property is a shorthand that specifies the column grid lines where a grid item starts and ends in a grid layout in one declaration. .grid-container { display: grid; grid-template-columns: repeat(4, 1fr); } .grid-item:nth-child(2) { grid-column: 3 \/ 5; \/* Starts on the third column line and ends\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":199429,"url":"https:\/\/css-tricks.com\/almanac\/properties\/b\/background-blend-mode\/","url_meta":{"origin":237446,"position":2},"title":"background-blend-mode","date":"April 6, 2015","format":false,"excerpt":"The background-blend-mode property defines how an element's background-image should blend with its background-color: .container { background-image: url('image.jpg'); background-color: red; background-blend-mode: screen; } CodePen Embed Fallback In the demo above, the default background-image on the left has no blend mode set and so the image overlaps the background-color. On the right\u2026","rel":"","context":"With 3 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":196161,"url":"https:\/\/css-tricks.com\/almanac\/properties\/b\/background-clip\/","url_meta":{"origin":237446,"position":3},"title":"background-clip","date":"February 17, 2015","format":false,"excerpt":"background-clip lets you control how far a background image or color extends beyond an element's padding or content. .frame { background-clip: padding-box; } Values border-box is the default value. This allows the background to extend all the way to the outside edge of the element's border.padding-box clips the background at\u2026","rel":"","context":"In \"background-clip\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":13972,"url":"https:\/\/css-tricks.com\/almanac\/properties\/b\/border-radius\/","url_meta":{"origin":237446,"position":4},"title":"border-radius","date":"August 31, 2011","format":false,"excerpt":"You can give any element \"rounded corners\" by applying a border-radius through CSS. You'll only notice if there is a color change involved. For instance, if the element has a background-color or border that is different than the element it's above. .element { border-radius: 10px; } \u00a0 \u00a0 Constituent properties\u2026","rel":"","context":"With 56 comments","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":322529,"url":"https:\/\/css-tricks.com\/almanac\/properties\/c\/column-rule-color\/","url_meta":{"origin":237446,"position":5},"title":"column-rule-color","date":"October 5, 2020","format":false,"excerpt":"The column-rule-color CSS property determines the color of a line between columns in a CSS multi-column layout. The property can't act alone! In order to see the color, we need to make the line \u2014 technically called a \"rule\" \u2014 between columns. That requires the column-rule-style property. .columns { column-count:\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/237446"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/2508"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=237446"}],"version-history":[{"count":7,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/237446\/revisions"}],"predecessor-version":[{"id":341772,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/237446\/revisions\/341772"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13913"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=237446"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=237446"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}