Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Jun 2010
    Posts
    302
    Thanks
    68
    Thanked 8 Times in 8 Posts

    Pure-CSS whitespace between border and element?

    Consider the following markup and associated css:

    Code:
    <style>
      .inner { 
        background: khaki;
        border:2px solid white;
      }
    
      .outer {
        border:3px solid darkkhaki;
      }
    </style>
    
    <div class="outer">
      <p class="inner">A quick brown fox jumps over the lazy dog.</p>
    </div>
    This gives a paragraph element with a khaki background with a white border, nested in a <div> with a darkkhaki border.

    Is there any way in pure CSS to do away with the outer div and apply a border directly to the paragraph element that puts some whitespace between the border and the element? (i.e. achieve the same effect without needing to nest the <p> within a <div>).

    EDIT:

    I've managed to achieve something approaching the effect I want, using a 2x2 white gif, as follows:

    Code:
    <style>
      p { 
        background-color: khaki;
        border-bottom:2px solid darkkhaki;
        background-image:url("2px-white.gif");
        background-position:bottom;
        background-repeat:repeat-x;
      }
    </style>
    
    <p>A quick brown fox jumps over the lazy dog.</p>
    Now, can this be extended to all edges of the element?
    Last edited by XmisterIS; 11-25-2014 at 04:49 PM.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Did you mean
    Code:
    <p class="newinner">A quick brown fox jumps over the lazy dog.</p>
    Code:
    .newinner{
      background: khaki;
      border:2px solid white;
      margin:0 2px;
    }
    ??
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Regular Coder
    Join Date
    Jun 2010
    Posts
    302
    Thanks
    68
    Thanked 8 Times in 8 Posts
    Hi, no, see the attached image for what I mean. Note that this was achieved using an "inner" nested in an "outer".

    Pure-CSS whitespace between border and element?-untitled.png
    Last edited by XmisterIS; 11-26-2014 at 12:45 PM. Reason: Typo.

  • #4
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,441
    Thanks
    11
    Thanked 305 Times in 304 Posts
    I can't think of a way. But you might find the markup just a bit less annoying by using a span, em or other inline tag around the text, but inside the <p>.

  • Users who have thanked tracknut for this post:

    XmisterIS (11-26-2014)

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,747
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello XmisterIS,
    We nest elements all the time to do this sort of thing. It's not divitis if the extra element actually serves a purpose.
    Look at this example:

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	margin: 0;
    	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
    	color: #000;
    	background: #fc6;
    }
    #container {
    	width: 600px;
    	padding: 100px;
    	background: #999;
    }
    .outer { border: 3px solid darkkhaki; }
    .inner {
    	padding: 0 10px;
    	background: khaki;
    	border: 2px solid white;
    }
    </style>
    </head>
    <body>
        <div id="container">
    		<div class="outer">
    			<div class="inner">
    				<p>A quick brown fox jumps over the lazy dog.</p>
    			<!--end .inner--></div>
    		<!--end .outer--></div>
        <!--end container--></div>
    </body>
    </html>
    You can get rid of one element without too much effort too, something like this -
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	margin: 0;
    	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
    	color: #000;
    	background: #fc6;
    }
    #container {
    	width: 600px;
    	padding: 100px;
    	background: #999;
    }
    .outer { border: 3px solid darkkhaki; }
    .outer p {
    	padding: 0 10px;
    	background: khaki;
    	border: 2px solid white;
    }
    .outer p.first {margin: 0 0 16px;}
    .outer p.last {margin: 16px 0 0;}
    </style>
    </head>
    <body>
        <div id="container">
    		<div class="outer">
    				<p class="first">A quick brown fox jumps over the lazy dog.</p>
    				<p>A quick brown fox jumps over the lazy dog.</p>
    				<p>A quick brown fox jumps over the lazy dog.</p>
    				<p>A quick brown fox jumps over the lazy dog.</p>
    				<p>A quick brown fox jumps over the lazy dog.</p>
    				<p class="last">A quick brown fox jumps over the lazy dog.</p>
    
    		<!--end .outer--></div>
        <!--end container--></div>
    </body>
    </html>
    Last edited by Excavator; 11-26-2014 at 06:25 PM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    XmisterIS (11-26-2014)

  • #6
    New to the CF scene
    Join Date
    Nov 2014
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    <style>
    .inner {
    background: khaki;
    border:2px solid white;
    }

    .outer {
    border:3px solid darkkhaki;
    }
    </style>

    <div class="outer">
    <p class="inner">A quick brown fox jumps over the lazy dog.</p>
    </div>
    Last edited by vinyl-junkie; 11-27-2014 at 03:03 PM. Reason: signatures only allowed through the control panel


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •