Remove Padding and Margin of All Elements inside

  • gs_s

    (@gs_s)


    13 years, 6 months ago

    Hi there,

    I’ve been editing the Twenty Ten css file to change the code/pre tag design.

    I’ve written a plugin which converts < code > tags into nested < pre > & < table > tags.

    The tag structure is like this,

    <code> $codelines </code>

    becomes

    <pre class="code">
<table>
  <tr>
    <td>

		<table>
			<tr><td>$codenum</td></tr>
		</table>

    </td>
    <td>

		<table>
			<tr><td>$codeline</td></tr>
		</table>

    </td>
  </tr>
</table>
</pre>

    So, I added the following css code at the end of the syle.css file.

    pre.code table, td, tr
{
	margin:0 0 0 0;
	padding:0 0 0 0;
	border:0;
}

pre.code
{
	margin:0;
	padding:0px;
	border:0;
	width:100%;
	overflow:scroll;
}

    Still I got two major problems. I uploaded the screen shot here.

    1. When there is no line, the td section gets squished. I’d like to keep the height even there is no code in it.
    2. It looks like the border or the padding seems to be too wide. I’d like to eliminate all the margins and paddings produced by this plugin.

    Can these be fixed? Thanks for your help.

Viewing 1 replies (of 1 total)
  • Thread Starter gs_s

    (@gs_s)

    13 years, 6 months ago

    OK, about the problem #2, removing this part eliminated the extra paddings.

    #content tr td {
	border-top: 1px solid #e7e7e7;
	padding: 6px 24px;
}

    However, since this is for a plugin, I’m looking for a way to override that part rather than the user has to edit the theme. I mean the user should not have to change the exestent code but just add extra lines in the buttom of the file.

    So, I tried this way,

    The plugin converts <code>$codelines</code> to this

    <pre class="code">
<table class="code">
  <tr>
    <td>
		<table class="codenum">
			<tr><td>$codenum</td></tr>
		</table>
    </td>
    <td>
		<table class="codeline">
			<tr><td>$codeline</td></tr>
		</table>
    </td>
  </tr>
</table>
</pre>

    Then I added the css code like this.

    .code pre {

	line-height: 20px;
	padding:0px 0px 0px 0px;
}

.code table tr td {
	padding:0px 0px 0px 0px;
}
.codenum table tr td {
	padding:0px 0px 0px 0px;
}
.codeline table tr td {
	padding:0px 0px 0px 0px;
}

    But it doesn’t override the current theme’s padding.

Viewing 1 replies (of 1 total)
  • The topic ‘Remove Padding and Margin of All Elements inside’ is closed to new replies.