htmlcssmargin
CSS: margin only around specific HTML div?
I have the following HTML Document, within the document I would like have a margin around the following div:
<div class="messageBody">
Whilst keeping the header and footers at their original width.
How can I do so?
I have tried adding
.messageBody{
margin: 10px
}
within the <style> tags but it is not affecting the margin in the div?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html data-editor-version="2" class="sg-campaigns" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<!--<![endif]-->
<!--[if (gte mso 9)|(IE)]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<style type="text/css">
body {
width: 600px;
margin: 0 auto;
}
table {
border-collapse: collapse;
}
table,
td {
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
img {
-ms-interpolation-mode: bicubic;
}
body,
p,
div {
font-family: arial, helvetica, sans-serif;
font-size: 14px;
}
body {
color: #000000;
}
body a {
color: #1188E6;
text-decoration: none;
}
p {
margin: 0;
padding: 0;
}
table.wrapper {
width: 100% !important;
table-layout: fixed;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
img.max-width {
max-width: 100% !important;
}
.column.of-2 {
width: 50%;
}
.column.of-3 {
width: 33.333%;
}
.column.of-4 {
width: 25%;
}
@media screen and (max-width:480px) {
.preheader .rightColumnContent,
.footer .rightColumnContent {
text-align: left !important;
}
.preheader .rightColumnContent div,
.preheader .rightColumnContent span,
.footer .rightColumnContent div,
.footer .rightColumnContent span {
text-align: left !important;
.preheader .rightColumnContent,
.preheader .leftColumnContent {
font-size: 80% !important;
padding: 5px 0;
}
table.wrapper-mobile {
width: 100% !important;
table-layout: fixed;
}
img.max-width {
height: auto !important;
max-width: 100% !important;
}
a.bulletproof-button {
display: block !important;
width: auto !important;
font-size: 80%;
padding-left: 0 !important;
padding-right: 0 !important;
}
.columns {
width: 100% !important;
}
.column {
display: block !important;
width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
}
</style>
<table class="wrapper" role="module" data-type="image" border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;" data-muid="b258ba20-9e45-4cef-96e8-396a2f5fbce8">
<tbody>
<tr>
<td style="font-size:6px; line-height:10px; padding:0px 0px 0px 0px;" valign="top" align="center">
<img class="max-width" border="0" style="display:block; color:#000000; text-decoration:none; font-family:Helvetica, arial, sans-serif; font-size:16px; max-width:100% !important; width:100%; height:auto !important;" width="600" alt="" data-proportionally-constrained="true"
data-responsive="true" src="stub src">
</td>
</tr>
</tbody>
</table>
</head>
<body>
<table class="module" role="module" data-type="code" border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;" data-muid="5dd19a7e-9c00-4720-8d1e-272802ca3964">
<tbody>
<tr>
<td style="font-size:6px; line-height:10px; padding:0px 0px 0px 0px;" valign="top" align="center">
<img class="max-width" border="0" style="display:block; color:#000000; text-decoration:none; font-family:Helvetica, arial, sans-serif; font-size:16px; max-width:100% !important; width:100%; height:auto !important;" width="600" alt="" data-proportionally-constrained="true"
data-responsive="true" src="stub src" ">
</td>
</tr>
<div class="messageBody ">
<tr>
<td height="100% " valign="top " role="module-content ">
<div class="introduction ">
<br>
<p class="sansserif ">
<b>Hi,</b>
<br>
<br> Click the link in the table below to see more info .
<br>
<br>
</p>
</div>
<style>
.messageBody{
margin: 38px
}
p.sansserif {
font-family: Arial, Helvetica, sans-serif;
}
#carTable {
color: #333;
font-family: Arial, Helvetica, sans-serif;
width: 100%;
;
border-collapse: collapse;
border-spacing: 0;
}
#carTable td,
th {
border: 1px solid transparent;
/* No more visible border */
height: 30px;
transition: all 0.3s;
/* Simple transition for hover effect */
}
#carTable th {
background: #DFDFDF;
/* Darken header a bit */
font-weight: bold;
text-align: left
}
#carTable td {
background: #FAFAFA;
text-align: left
/* Cells in even rows (2,4,6...) are one color */
#carTable tr:nth-child(even) td {
background: #F1F1F1;
}
/* Cells in odd rows (1,3,5...) are another (excludes header cells) */
#carTable tr:nth-child(odd) td {
background: #FEFEFE;
}
</style>
<div class="table ">
<table id="carTable ">
<tbody>
<tr>
<th>Car Number</th>
<th>Group</th>
</tr>
<!-- -->
<tr>
<td><a href="https://www.testurl.com ">CAR_1</a></td>
<td>Group 1</td>
<!-- -->
</tbody>
</table>
</div>
<div class="errorInformation ">
<br>
<p class="sansserif ">
If you think this was sent mistakenly, please contact support at <a href="mailto:[email protected] ">[email protected]</a>
<br>
<br>
</p>
</div>
</td>
</tr>
</div>
</tbody>
</table>
</body>
<footer>
<table class="module " role="module " data-type="text " border="0 " cellpadding="0 " cellspacing="0 " width="100% " style="table-layout: fixed; " data-muid="20f34b16-a07e-4993-8822-da37a70f37cc " data-mc-module-version="2019-10-22 ">
<tbody>
<tr>
<td style="padding:14px 0px 14px 0px; line-height:10px; text-align:inherit; background-color:#135670; " height="100% " valign="top " bgcolor="#135670 " role="module-content ">
<div>
<div style="font-family: inherit; text-align: center "><span style="color: #f6f2f2 ">Get the latest news at </span><a href="https://testurl.com><span style="color: #20ede7">testurl.com</span></a>
</div>
<div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</footer>
</html>I currently have 2 style sheets in this HTML Doc and I am wondering is one overriding the other?
Solution
Introduction
Style sheets do cascade and also over-ride each other.
You already have a margin set for messagebody so you should set that one.
Increase the existing margin instead of adding a new one.
.messageBody{
margin: 38px
}
Additionally, it seems like your code is breaking HTML conventions. As mentioned in the comments, you should run your code through an html validator.
Use the browser inspector to play with the CSS
Have a look at the following article: Get Started With Viewing And Changing CSS
Using the inspector, I saw the result of your currect code and added a dotted border to make it more visible.
When I changed the margin to 200px, the result is even more obvious:
- How do I add a default text to the beginning of an html text area?
- ES2015 import doesn't work (even at top-level) in Firefox
- Can I force a page break in HTML printing?
- Why HTML <button type="submit" >doesn't work with internet explorer?
- CSS Is Not Importing into HTML
- Set the default value of an input field
- How to force background image to stretch/compress to fit div, without keeping aspect ratio
- How to render raw html in the PyHTML library
- HTML CSS Layout breaks with parent of floated elements
- How does the "position: sticky;" property work?
- Content Security Policy error - violating directive: script-src 'self'
- Navigation arrows are not showing
- Fixing Border Radius in Safari?
- How to show the date picker if I click the parent div after explictly hiding the date type input in React?
- Array of data showing in console but not in HTML after passing it through dialog in Angular project
- Puppeteer.page.waitForSelector timeouts, even though the element is present
- How can I allow document.domain on a sandboxed iframe?
- problems with my button background color and hover and active states
- Ignore html tags in preg_replace
- Append element as sibling after element?
- React.js: Set innerHTML vs dangerouslySetInnerHTML
- How do I auto scroll in Angular?
- Button click not showing/hiding content
- Will browser pull from cache if the same resource is being requested by a different origin?
- filter file upload for only text files
- Correct XPath query to fetch div inner text
- How to select(highlight) and copy ordered list numbers
- Why javascript is not loading for document.readyState==="complete"
- Set the background color of the entire webpage (the browser's window)
- HTML/CSS Flip Card Works on Desktop but not Mobile